弹性布局

排列

默认横向正序排列

flex-direction:row

横向倒序排列

flex-direction:row-reverse

纵向正序排列

flex-direction:column

纵向倒序排列

flex-direction:column-reverse

---

换行

不换行

flex-wrap:nowrap;

换行，第一行在上方，从左上角开始排列

flex-wrap:wrap;

换行，第一行在下方，从左下角开始排列

flex-wrap:wrap-reverse;

---

主轴对齐方式

左对齐-无间隔

justify-content:flex-start

右对齐-无间隔

justify-content:flex-end

水平(全部)居中-无间隔

justify-content:center

两两之间子元素间隔(空白)相等

justify-content:space-between

每个子元素两侧空白相等

justify-content:space-around

---

侧轴对齐方式

沿父容器的顶对齐

align-items:flex-start

沿父容器的底对齐

align-items:flex-end

沿父容器的主轴

align-items:flex-center

侧轴对齐方式

align-items:baseline

拉伸到父容器的高度

align-items:flex-stretch

---

排序

默认是0

order:1
order:2
order:3
order:4

---

子元素扩展与收缩

扩展排列-无间隔

4：2排列

flex-grow:4
flex-grow:2

收缩排列-无间隔

flex-shrink:4
flex-shrink:1

---

合写

合写

flex:auto(1 1 auto)

等价于

flex-grow:1;
flex-shrink:1;
flex-basis:auto;

合写

flex:none(0 0 auto)

等价于

flex-grow:0;
flex-shrink:0;
flex-basis:auto;