Display
Below is an inline flexbox container, it is an inline element and takes up the width of its flex items.
Flex-Direction
Below is the default flex-direction property, with main axis left to right and cross axis top to bottom.
Below is the flex-direction: column property, with main axis top to bottom and cross axis right to left.
Flex-Wrap
Below is the default flex-wrap property, with flex items fitting themselves into 1 row.
Justify-Content
The justify-content property aligns the flex items on the main axis.
The space-between value divides the empty space and inserts it between the flex items.
Align-Items
The align-items property specifies the alignment for flex items inside the container.
The baseline value aligns all flex items along the bottom of the font.
Align-Content
The align-content property, working with flex-wrap, aligns lines of flex items.
Align-Self
The align-self property sets the alignment for a flex item inside the flex container.
Flex, Flex-Grow, Flex-Shrink & Flex-Basis
The flex property combines 3 values (flex: flex-grow flex-shrink flex-basis).
Flex-grow specifies how much of the available space the flex item should take in the flex container, with the default being 0.
Flex-shrink specifies how much the flex item will shrink relative to other flex items in the flex container when there isn't enough space, with the default being 1.
Flex-basis specifies the intial size of the flex item, with the default being auto.
Order
The order property specifies the order of the flex item relative to the other flex items in the same container as shown by the box numbers.