Flex知识总结

1、组成部分

• 弹性容器
• 弹性盒子
• 主轴
• 侧轴（交叉轴）

2、定义弹性布局

display: flex;  //占位

3、主轴对齐方式（父）

justify-content: flex-start;  // flex-end
justify-content: center;
justify-content: space-evenly;
justify-content: space-between;
justify-content: space-around;

4、侧轴对齐方式（父）

algin-items：stretch;
algin-items：center;

5、某一个元素侧轴对齐（子）

align-self：algin-items一致

6、弹性伸缩比（子）

flex：1；

7、改变主轴方向

flex-direction: column;

8、换行

flex-wrap: wrap;

9、行对齐方式（父）

align-content: justify-content一致;