flex

应该1年前有过了一遍api，兼容不好不够用，据说现在能到ie9+了？那就再过一遍准备直接往项目上写！

css的4种布局方式：
1. 标准文档流
2. 浮空布局
3. 定位布局
4. flex布局

flex有容器和轴，两个概念

1.1 父容器属性

父容器可以统一设置子容器的排列方式，子容器也可以单独设置，以子容器的设置为准。

• justify-content 设置子容器沿主轴排列（x轴 水平）

     flex-start  起始端对齐
     flex-end 末尾端对齐
     center 居中对齐
     space-around 均匀分布，首位的子容器距离父容器的距离比里面的更近
     space-between 均匀分布，首尾和父容器相切

• align-items 设置子容器沿交叉轴排列（y轴 垂直）

    flex-start 起始端对齐
    flex-end   末尾端对齐
    center   居中对齐
    stretch  子容器拉伸至和父容器高度一致

• flex-wrap 设置子容器的换行排列方式

    nowrap 不换行
    wrap 换行
    wrap-reverse 倒序换行，从下往上换行

• align-content 行与行间的对齐方式（需要设置换行）

    flex-start 起始端对齐
    flex-end 末尾端对齐
    center 居中对齐
    space-between 等边距均匀分布
    space-around 等间距均匀分布
    stretch 拉伸对齐

1.2 子容器属性

• flex

    flex : 1

• align-self 单独设置子容器沿交叉轴排列（y轴 垂直）

    flex-start 起始端对齐
    flex-end   末尾端对齐
    center   居中对齐
    stretch  子容器拉伸至和父容器高度一致

2. 轴

• flex-direction 主轴方向

    row 从左向右（默认）
    row-reverse 从右向左
    column 从上向下
    column-reverse 从下向上