弹性布局display:flex

1.flex-direction：设置伸缩项目的排列方式，即主轴的方向

row 设置从左到右排列
row-reverse 设置从右到左排列
column 设置从上到下排列
column-reverse 设置从下到上排列

2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素

flex-start 伸缩项目以起始点靠齐
flex-end 伸缩项目以结束点靠齐
center 伸缩项目以中心点靠齐
space-between 伸缩项目平局分布
space-around 同上，但两端保留一半的空间

ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        justify-content:space-around;
    }
    li{
        width:200px;
        height: 200px;

        text-align: center;
        line-height: 200px;
    }

3.align-items：调整侧轴方向对齐方式

flex-start 伸缩项目以顶部为基准，清理下部额外空间
flex-end 伸缩项目以底部为基准，清理上部额外空间
center 伸缩项目以中部为基准，平均清理上下部额外空间
baseline 伸缩项目以基线为对齐，清理额外的空间
stretch 伸缩项目填充整个容器，默认

    ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }

    ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        align-items:stretch;
        justify-content:space-between;
    }
    li{
        width:200px;//指定高度，才能拉伸

        text-align: center;
        line-height: 200px;
    }

4.flex-wrap控制是否换行

nowrap 默认值，都在一行或一列显示 ，会自动改变盒子内元素宽度
wrap 伸缩项目无法容纳时，自动换行
wrap-reverse 伸缩项目无法容纳时，自动换行，方向和 wrap 相反

5.align-content：堆栈排列，应用flex-wrap：wrap后换行进行控制，调整行之间的位置。用于多行，要设置父容器的高度

flex-start
flex-end
center
space-between
space-around
stretch默认

6.flex-flow：flex-direction和flex-wrap的简写

7.flex：控制伸缩容器内父盒子剩余空间的分配比例

    li{

        text-align: center;
        line-height: 100px;
        margin:10px;
    }
    li:nth-child(1){
        flex:1;
    }
    li:nth-child(2){
        flex:3;
    }
    li:nth-child(3){
        flex:1;
    }

    li:nth-child(1){
        flex:1;
    }
    li:nth-child(2){
        flex:3;
    }
    li:nth-child(3){
        flex:1;
    }
    li:nth-child(4){
        width:400px;
    }

8.align-self，子元素覆盖父元素设置的align-items，属性值也是flex-start、flex-end、center、baseline、stretch

    ul{
        align-items:flex-start;
    }
    li:nth-child(2){
        align-self:center;
    }

9.order，设置伸缩项目的顺序

    li:nth-child(1){
        order:3;
    }
    li:nth-child(2){
        order:1;
    }
    li:nth-child(3){
        order:2;
    }