CSS Flex Layout

Flex Container

align-content property require
flex-wrap:wrap or flex-wrap:wrap-reverse

Flex Items

CSS flex layout (Flexible Box) allows elements within a container to be auto adjust depending upon the screen size. Flexbox design comes with several css style properties that makes flex item adjustable. It is hard to remember all properties and understand behaviour.

This tool helps us to understand the flexbox rules. Two primary parts of flexbox are:

1) Flexbox container - Parent element that holds all flex items

<div class='flex-container' >
 <div class='item1'>item 1</div>
 <div class='item2'>item 2</div>
 ...
</div>
2) Flexbox items - direct child elements under the flex container 
<div class='flex-container' >
 <div class='item1'>item 1</div>
 <div class='item2'>item 2</div>
 ...
</div>

Flex Container properties are
display: make container flexible
justify-content: align all flex items on the main axis
align-items: align all flex items on the cross axis
flex-direction: this can change axis direction to horizontally, vertically and reverse order
flex-wrap: force to display flex items into single or multiple lines
align-content: align flex item when flex-wrap is set to multiline
flex-flow: shorthand property of 'flex-direction' 'flex-wrap'

Flex Item properties are
order: replace flex item position in the item list
align-self: align self and override parent alignment style
flex-grow: increase item self size to remaining available space
flex-shrink: shrink flex item size relative to remaining item size
flex-basis: initial size of flex item in px, % etc
flex: shorthand property of 'flex-grow' 'flex-shrink' 'flex-basis'

Flexbox vs Grid

flexbox can use when you have to arrange elements in a one direction like listview, navbar links. Grid style can use for two dimentional layout like card container, page layout, collage wrapper.

resources