弹性盒模型

弹性盒模型
（1）平均分配

            #box{
                height: 200px;
                border: 1px solid #000;
                display: flex;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                margin: auto;
            }

F8B25~38_BY34DOO_)5X4WA.png

（2）设置主轴方向为水平方向

#box{
                height: 200px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                flex-direction: row;
                /*老版弹性盒模型*/
                display: -webkit-box;
                -webkit-box-orient: horizontal;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 40px;
                color: #fff;
            }

1.png

（3）设置主轴方向为垂直方向

#box{
                height: 200px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                flex-direction: column;             
                /*老版弹性盒模型*/
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 40px;
                color: #fff;
            }

2.png

（4）富裕空间平均分配在每个元素两侧

#box{
                height: 300px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                justify-content: space-around;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 40px;
                color: #fff;
                margin: auto;
            }

4.png

（5）元素在侧轴开始位置，富裕空间在侧轴结束位置

            #box{
                height: 300px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                align-items: flex-start;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 30px;
                color: #fff;
            }

5.png

（6）元素在侧轴结束位置，富裕空间在侧轴开始位置

            #box{
                height: 300px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                align-items: flex-end;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 30px;
                color: #fff;
            }

6.png

（7）元素在侧轴中间位置，富裕空间在侧轴两侧

            #box{
                height: 300px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                align-items: center;
            }
            #box div{
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 30px;
                color: #fff;
            }

7.png

（8）弹性布局，会根据浏览器窗口来分配显示

            #box{
                height: 300px;
                border: 1px solid #000;
                /*新版弹性盒模型*/
                display: flex;
                overflow: hidden;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            #box div{   
                width: 50px;
                height: 50px;
                background-color: #f00;
                font-size: 30px;
                color: #fff;
                text-align: center;
            }

8.png

（9）弹性布局，水平居中

.container{
  display:flex;
  flex-direction:column;
  align-items: center;
}

11.png