Flexbox is a new module in CSS3 that makes it easy to align elements to ne another in different directions and orders.
Gives the container the ability to expand and shrink elements to best use the available space.
Replaces float layouts.
Concepts
Flex Container & Flex Items, Main and Cross Axis
display: flex
Container
flex-direction: row | row-reverse | column | column-reverse
which direction the Main Axis goes (left>right, up or down)
row-reverse inverts item order along main axis
column aligns items on top of each other down the cross axis (column-reverse reverses order)
flex-wrap: nowrap | wrap | wrap-reverse
Defines if the flex items should go to a next line if not enough space
justify-content: flex-start | flex-end | center | space-betweem | space-around | space-evenly
How flex items will be aligned on the main axis:
center: center justified
space-between = fully justified
space-around : space space around each item
space-evenly: similar to above but equal space between each element
flex-end / flex start: right/left justified
align-items: stretch | flex-start | flex-end | center | baseline
How flex items will be aligned on the cross axis
align-content: stretch | flex-start | flex-end | center | space-between | space-around
Defines how flex items are aligned on the cross axis when there is more than one row.
stretch – resizes all items to size of largest.
center: horizontal alignment of items
flex-start / flex-end: aligns all items to top / bottom of div
baseline: aligns items by the bottom (baseline) of the text contained on all items horizontally.
Item
align-self: auto | stretch | flex-start | flex-end | center | baseline
Similar to align-items but for single items
order: 0 | <integer>
defines order in one specific item should appear (to reorder)
flex-grow: 0 | <integer>
Maximum width
flex grow: 1 will allow the item to expand as much as possible to take all available space in the container
flex-shrink: 1 | <integer>
minimum width
1: element is allowed to shrink
0: element no longer allowed to shrink
flex-basis: auto | <length>
Base width
Percentage based (only if there is available space)
flex: 0 1 auto