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