Flex Layout Box Model
When we use display: flex or inline-flex to create a flex container, the direct children of that container become flex items.
Unlike box model, flexbox has two axes — the main axis which is defined by flex-direction and the cross axis; start and end lines; and size.
Properties applied to flex container
flex-direction
Flex-direction is used to change the direction in which the flex items display.
The default flex-direction is row, when you choose row or reverse-row, the direction of the main axis would be horizontal. On the contrary, when you choose column or reverse-column, the direction of the main axis would be vertical.
flex-wrap
The initial value is nowrap. When you use wrap, if your items are too large to be displayed in one line, they will wrap onto the other line.
flex-flow
Flex-direction and flex-wrap can be combined into flex-flow in which the first value is flex-direction and the second value is flex-wrap.
justify-content
Justify-content is used to align items on the main axis. The default vale is flex-start which will line items up from the main start.
align-items
On the contrary to justify-content, align-items aligns items on the cross axis.
