flexible layout setting method:

---

The flexible layout must be enabled in the parent element, right The child element has an effect. After setting, the child element div is no longer on its own line and the height is the same as the height of the parent element by default. The width is the width of the content.

display: flex;

• The direction of the flexible layout is the default row
• row items are arranged from left to right
• row-reverse items Arrange from right to left
• column items are arranged vertically from top to bottom
• column-reverse items are arranged from bottom to top
• flex- direction:row;

---

• The alignment in the direction of the vertical flexible layout
• center: The item is aligned in the center

li>

• flex-start align the vertical start position
• flex-end align the vertical end position
• The default style of stretch is the height and the parent label when the item does not set the height Elevation
• baseline first line of text alignment
• flex-warp wrap
• align-items: baseline;

---

• the alignment in the direction of the flexible layout
• center
• The flex-start item is located at the beginning of the direction of the flexible layout

li>

• The flex-end item is located at the end
• space-around is evenly divided
• space-between The space between the two items on both sides is equal

< li>justify-content: center;

Flexible layout automatic wrapping

flex-wrap: wrap;