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;