Article type: draft box article sorting.
Foreword: Flex layout forever drop god!
1. The ELASTIC layout of the CSS box
🤤 In the elastic layout model, the child elements of an elastic container can be arranged in any direction, or they can “flex” their size, either by increasing the size to fill unused space, or by shrinking to avoid overflow of parent elements. Both horizontal and vertical alignment of child elements can be easily manipulated. By nesting these boxes (horizontal boxes within vertical boxes, or vertical boxes within horizontal boxes), you can build the layout on two dimensions. MDN CSS elastic box layout
But flexbox is essentially a one-dimensional layout, because a Flexbox can only handle the layout of elements in one dimension, one row or one column, at a time. Nesting a two-dimensional layout is essentially a two-dimensional layout. By contrast, CSS Grid Layout, another two-dimensional Layout, handles rows and columns at the same time. Basic concepts of MDN Flex layout
2. The flex layout
😎 😎 😎 😎 😎
2.1 Flex Layout Properties
| attribute | describe | value | The default value | Function object |
|---|---|---|---|---|
| flex-direction | Defines the orientation of the flex container’s main axis (positive or negative) | Row, row-reverse, column, column-reverse | row | Flex container |
| flex-wrap | Items that are too large to display all in one line can be wrapped by setting flex-Wrap | Nowrap, wrap, wrap-reverse, | nowrap | Flex container |
| flex-flow | Flex-direction and flex-wrap short properties flex-flow | The above two attribute values are combined | row nowrap | Flex container |
| align-items | Controls the alignment of subitems on the cross axis | Stretch, flex-start, center, flex-end, baseline | stretch | Flex container |
| justify-content | Allocate space between subitems on the spindle flex-start, center, flex-end, space-between, space-around | The above two attribute values are combined | row nowrap | Flex container |
| align-content | Allocates space up the intersecting axis, similar to precy-content on the intersecting axis | The above two attribute values are combined | row nowrap | Flex container |
| flex-grow | Is an integer and increases the size along the main axis based on flex-basis | number | 0 | Flex on children |
| flex-shrink | Handle flex subitem shrinkage | number | 1 | Flex on children |
| flex-basis | Define the size of the flex child | Auto, number | auto | Flex on children |
| flex | Flex-grow, flex-shrink, and flex-basis are combined shorthand properties | The cell | The cell | Flex on children |
| order | Flex-grow, flex-shrink, and flex-basis are combined shorthand properties | The cell | The cell | Flex on children |
| align-self | Flex-grow, flex-shrink, and flex-basis are combined shorthand properties | The cell | The cell | Flex on children |
Reference Documents:
- 1.CSS elastic box layout
- 2. Basic flex layout concepts