1, the display: flex; display: inline-flex; The difference between flex- Container as a whole as a block-level element and inline element. Inline-flex can be displayed on the same line as other inline elements.
2. After the Flex layout is set, the items in the Flex Container are automatically arranged from main-start to main-end, regardless of whether they are block-level elements or inline elements. So the Flex container can be set up to invalidate items without blocking their arrangement.
Container properties: context-content, default flex-start alignment, and
Flex-end (end side only)
Center (center)
Space-between (two sides close to each other with equal spacing)
Space-instituted (all spacing equal on both sides and in the middle)
Space-around (the distance between the two sides is half of the distance between the middle)
The align-items attribute determines how flex items are aligned on the cross axis. The default value is Normal. Stretch each item along the cross axis to the height of the filling container.
- When there is only one line of elements:
If set to flex-start, or with respective heights without align-item:
When set to flex-end:
Set to baseline alignment: baseline (if multi-line text is aligned with the baseline of the first line):
