Flex 布局

给父容器设置 display: flex

• 父亲为 flex container
• 子容器为 flex items

flex container 的属性 （设置在父容器上）

1. flex-direction ：方向

• row （默认）
• row-reverse
• column
• column-reverse

2. flex-warp ：换行

• nowarp （默认）
• warp

3. flex-flow ：方向 + 换行
   是 flex-direction、flex-warp 的组合
   例如 flex-flow： row nowarp

4. justify-content ：沿主轴排列，设置在父容器上

• space-between ：空白在子元素之间，子元素两边贴上父元素
• space-around ： 空白环绕子元素，子元素两边与父元素有空白
• center ： 子元素贴在一起打包居中
• flex-start ： 子元素靠近主轴的起点
• flex-end ： 子元素靠近主轴的终点

5. align-items ：沿侧轴排列，设置在父容器上

• stretch ：子元素伸展到等高，（默认）
• flex-start ：子元素靠近侧轴起点
• flex-end：子元素靠近侧轴终点
• center: 子元素垂直居中，不伸展

6. align-content :多行/列内容对齐，把一整行/列看成整体分配

flex items 的属性 （设置在子元素上）

1. flex-grow ：增长比例（空间过多时）

• 每个子元素设置一个 flex-grow：[数字]，多余空间按数字比例分配

2. flex-shrink ：收缩比例（空间不够时），

• 类似 flex-grow，空间不够时，收缩的比例

3. flex-basis ：默认大小（一般不用）
4. flex ：上面三个的缩写

• 例如：flex: 1 2 100px
  //第一个为grow，第二个为shrink，第三个为basis

5. order ：指定子元素的显示顺序，每个子元素都要指定 order 才生效（取代圣杯双飞翼）
6. align-self ：自身的对齐方式（不按父容器的来，自己特立独行）