flex伸缩布局

1.父项属性

display:flex; //flexb布局

flex-direction:row;//设置主轴的方向

2.justify-content 设置主轴上子元素的排列

• flex-start //开头
• flex-end //结尾
• center//居中
• space-around //平均分配
• space-between //两端贴，中间平均分配

3.flex-wrap 强制换行

默认情况下，使用flex后，元素总是在一行显示，当元素的大小超出范围后，会缩小其他的子元素

flex-wrap:nowrap;

div中使用的强制一行 white-space:nowrap

4.align-items 侧轴上子元素的排列（单行）

• flex-start //开头
• flex-end //结尾
• center //居中
• stretch //拉伸，当子元素没有高度或宽度，会拉伸同父盒子一样的高宽

5.align-content 侧轴上子元素的排列（多行），前提要使用换行 

• flex-start //开头
• flex-end //结尾
• center//中间
• space-around //平均分配
• space-between//两边贴贴，其余空间平均分配
• stretch //拉伸 

6.flex-flow 主轴和换行的合写 

felx-flow:row wrap;

---

7.子元素中flex，分配剩余空间（自适应）

   flex:1//占几份占几份

8.align-slef 设置子元素中的某一个在侧轴上的排列

9.order 子元素中的排列顺序 （排列好的是从0开始，小于零就会排在0这个元素的前面） 

从小到大开始排列，每一个子元素都设置order

与z-index不同，z-index是堆在一起的

---

补充

// 换行，

flex-wrap: wrap;