Display: flex; display: inline-flex; display: -webkit-flex; /* Safari */
Box model: relies on display + position + float properties
Elastic layout: Flex objects ask the container, and the children of the container are items
Container attribute
| attribute | instructions | optional |
|---|---|---|
| flex-direction | The spindle direction | row |
| flex-wrap | How to wrap | nowrap |
| flex-flow | The first two merge | |
| justify-content | Spindle alignment | flex-start |
| align-items | Cross axis alignment | flex-start |
| align-content | Alignment of multiple cross axes | flex-start |
The project properties
| attribute | instructions | optional |
|---|---|---|
| order | Order, default 0 | digital |
| flex-grow | Zoom ratio, default 0, no zoom (if the remaining space, the priority is 1, all 1, then equal) | digital |
| flex-shrink | Shrink scale, default 1, not shrink (if space is not enough, priority to shrink 0, all 0, equal) | digital |
| flex-basis | Before allocating extra space (before enlarging), set the space occupied by the main axis of the project | The length of the value |
| flex | The above three merge flex-grow flex-shrink flex-basis | none |
| align-self | Specify the alignment of this item separately | Reference the align – items |