What is Flex Box
When working with flexbox you need to think in terms of two axes — the main axis and the cross axis.
- The main axis is defined by the flex-direction property
- The cross axis runs perpendicular to it
Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.
Before the Flexbox Layout module, there were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Reference:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- https://www.w3schools.com/css/css3_flexbox.asp