1-主轴变换

• 默认主轴为X轴

flex-direction:row

• 切换主轴为Y轴

flex-direction: column;

• x轴反向排列

flex-direction: row-reverse;

• Y轴反向排列

flex-direction: column-reverse;

---

2-主轴对齐

• 默认从正到反方向排列

justify-content: flex-start;

• 反方向排列

justify-content: flex-end;

• 居中排列

justify-content: center;

• 2比1的比例排列,中间占2,两边占1

justify-content: space-around;

• 两侧靠边,中间自适应排列

justify-content: space-between;

• 1比1的比列排列,两边和中间距离一致

justify-content: space-evenl

---

3-侧轴对齐

• 从上对齐

align-items: flex-start;

• 从下对齐

align-items: flex-end;

• 居中对齐

align-items: center;

• 满比例对齐

align-items: stretch;

---

4-侧线对齐

/* 上*/

align-self: flex-start

/* 中*/

align-self: center

/* 下*/

align-self: flex-end

5-伸缩比

flex:1;

两边盒子给固定宽度,中间使用flex伸缩比,使宽度自适应.数值是0-1之间

6-换行

flex-wrap:wrap

---

6-多行排列

align-content: space-between;

属性值和主轴对齐方式一样.