Flex布局方向 flex-direction

flex-direction: column

item
item
item

flex-direction: column

item
item
item

Flex 主轴对齐 justify-content

justify-content: flex-start

item
item
item

justify-content: center

item
item
item

justify-content: end

item
item
item

justify-content: space-around

item
item
item
item

justify-content: space-between

item
item
item
item

justify-content: space-evenly

item
item
item
item

Flex 横轴对齐 align-items

align-items: flex-start

item
item
item

align-items: center

item
item
item

align-items: flex-end

item
item
item

align-items: baseline

item
item
item

align-items: stretch

item
item
item

Flex 元素间隔控制 gap

gap:20px

item
item
item

center下的 gap:20px

item
item
item

end下的 gap:20px

item
item
item

Flex 元素换行 flex-wrap

flex-wrap:nowrap

item
item
item

flex-wrap:wrap

item
item
item

Flex 子元素横轴对齐 align-self

align-self: flex-start

item
item
item

align-self: flex-end

item
item
item

align-self: center

item
item
item

align-self: baseline

item
item
item

align-self: stretch

item
item
item

Flex 子元素弹性宽度或高度基础设置 flex-basic

flex-basic:100px

item
item
item
item

flex-basic:200px

item
item
item
item

flex-basic:500px

item
item
item
item

Flex 子元素占用容器剩余空间比例 flex-grow

flex-grow:1

item 1
item 0
item 0
item 0

flex-grow:3; flex-grow:1;（3/4 + 1/4 = 1）分配剩余空间

item 3
item 0
item 0
item 1

Flex 子元素超过容器空间后被压缩比例 flex-shrink

flex-grow:1

item 200
(实际宽度112px)
item 200
item 200
item 200

flex-grow:5

item 200
(实际宽度50px)
item 200
(实际宽度134px)
item 200
item 200

flex-grow:0(禁止压缩)

item 200
(实际宽度200px)
item 200
(实际宽度82px)
item 200
item 200

Flex 子元素排序设置 flex-order

order随机设置

item1(order:4)
item2(order:3)
item3(order:1)
item4(order:5)
item5(order:2)