To set up a flexbox layout, just set the display mode of the container.
There are 4 possible types of directions that the elements of a flexbox can take:
rowcolumnrow-reversecolumn-reverseThese are the flexbox axis:
If the direction of the flexbox is row, the main axis is horizontal and the cross axis is
vertical. If the direction of the flexbox is column, these are the opposite.
If the elements in a flexbox do not fill the container, you can use justify-content to decide how
those elements will be distributed though the main axis. Possible values are:
centerflex-startflex-endspace-betweenspace-aroundspace-evenlyalign-items works similar as justify-content, but it works on the cross axis, instead
of the main axis. Possible valus are:
flex-startflex-endcenterstretchbaseline (Aligns based on the baseline of the text inside the box)By default, flexbox will fit all the items together. Using flex-wrap we can separate the items
inside a flexbox into several rows. Possible values are:
nowrapwrapwrap-reverseIf the container is too small, the boxes will shrink. You can use flex-shrink to set the
proportions for shrinking, in comparasion with the rest of boxes
The opposite of shrinking if growing. When the flexbox makes the items fill the whole main axis, you can set up the proportions for each item.
flex-basis sets the initial size of an item before CSS shrinks it or expands it. The value
auto sizes it based on its content.
You can set all flex-grow, flex-shrink and flex-basis using the
shorthand flex
Aligment in the cross axis can be individually overriden with align-self
Table like emulation