弹性盒模型
（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
