html 弹性盒模型

父元素：(display: flex,flex-direction,justify-content, align-items,align-content)

要使用弹性盒模型需要设置display: flex;
设置了flex-direction的一个方向为主轴则另一个方向就为侧轴，这个需要分清
1、flex-direction
（1）flex-direction: row;默认从左到右

（2）flex-direction: row-reverse;

（3） flex-direction: column;垂直排列
（4）flex-direction: column-reverse;反向垂直排列

    <style type="text/css">
            .box{
                width: 800px;
                height: 500px;
                border: 10px solid pink;
                display: flex;
                flex-direction: row;
            }
            .box .item{
                width: 80px;
                height: 80px;
                background-color: yellow;
                border: 1px solid black;
            }
        </style>

<div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>   
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>

2、 justify-content主轴
(1) justify-content: flex-start;

（2）justify-content: flex-end;

（3）justify-content: center;

3、 align-items侧轴
（1）align-items: center;

.box{
                width: 800px;
                height: 400px;
                border: 10px solid pink;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

（2）align-items: flex-end;（3）align-items: flex-start;
4、flex-wrap:换行
flex：wrap;默认为wrap换行
flex:nowrap;
flex:wrap-reverse;
5、align-content堆栈伸缩行
align-content:flex-start;align-content:flex-end;align-content:center;
align-content: space-around;align-content: space-between;
子元素：(order,flex,align-self)
1、order
支持负数不支持小数

    .box .item:nth-of-type(1){
                order: 3;
            }
            .box .item:nth-of-type(2){
                order: 3;
            }

            .box .item:nth-of-type(3){
                order: 0;
            }

            .box .item:nth-of-type(4){
                order: 2;
            }

            .box .item:nth-of-type(5){
                order: -1;
            }

2、flex：伸缩性

.box .item:nth-of-type(1){
                flex: 1;
            }
            .box .item:nth-of-type(2){
                flex: 2;
            }

            .box .item:nth-of-type(3){
                flex: 3;
            }

            .box .item:nth-of-type(4){
                flex: 4;
            }

            .box .item:nth-of-type(5){
                flex: 5;
            }

3、align-self对子元素设置侧轴位置

.box .item:nth-of-type(1){
                align-self: flex-start;
            }
            .box .item:nth-of-type(2){
                align-self: center;
            }

            .box .item:nth-of-type(3){
                align-self: flex-end;
            }

            .box .item:nth-of-type(4){
                align-self: flex-start;
            }

            .box .item:nth-of-type(5){
                align-self: center;
            }

4、margin:auto;