Flex
Flex allows users to build Flexible Box Module based layouts. It serves as a technical component that abstracts users from working directly with CSS Flexbox and helps them write more semantic layouts.
Flexboxes are comprised mainly of two axes: the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.
- The main axis is defined by flex-direction, which has four possible values:
row,row-reverse,columnandcolumn-reverse. - The cross axis runs perpendicular to the main axis.
- If the flex-direction (main axis) is set to
roworrow-reversethe cross axis runs down the columns. - If the flex-direction is set to
columnorcolumn-reverse, the cross axis runs down the rows.
The flexbox makes no assumption about the writing mode of the document. Left to right or right to left can be used depending, for example, on the language used. A start and end edge is used to refer to the direction of the placement of elements.
For example, If the flex-direction is row and the language is English, then the start edge of the main axis will be on the left, the end edge on the right.
An area of a document laid out using flexbox is called a flex container.
- The items display in a row (the flex-direction property's default is
row). - The items start from the start edge of the main axis.
- The items do not stretch on the main dimension, but can shrink.
- The items will stretch to fill the size of the cross axis.