CSS Flex Layout

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>

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'

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.