弹性布局flex知识点

1. flex布局原理
   通过给父盒子添加flex属性来控制子盒子的位置和排列方式

2. 常见父项属性

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: flex-direction | flex-wrap 复合属性

单行属性 ：

主轴
justify-content: flex-start | flex-end | center | space-between | space-around;
space-between：两端对齐，项目之间的间隔都相等；
space-around：每个项目两侧的间隔相等；

侧轴
align-items: flex-start | flex-end | center | baseline | stretch;

多行属性：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3. 常见子项item的属性
   flex：num,表示子项目分配剩余空间，所占份数

align-self，控制子项自己在侧轴上排列的方式，所以这个方法用在子项自己身上，而不是父项