在flex布局出現(xiàn)之前紊婉，我們使用的傳統(tǒng)布局主要有以下幾種：
- normal flow 文檔流、正常流
- float + clear 清除浮動
- position relative + absolute 相對 + 絕對定位
- display inline-block 橫向布局
- 負 margin 擴大寬度辑舷、產(chǎn)生位移
但是這些傳統(tǒng)的布局方式無法實現(xiàn)垂直居中等喻犁。
flex也可稱為“彈性布局”，flex布局有以下幾個特點：
- 塊級布局側(cè)重垂直方向何缓，行內(nèi)布局側(cè)重水平方向肢础。flex布局與方向無關(guān)
- flex布局可以實現(xiàn)空間自動分配，自動對齊
- flex布局適用于簡單的線性布局碌廓，復(fù)雜的布局則可以使用grid布局
接下來就將對flex布局的幾個重要知識點進行歸納
該flex容器在縱橫有兩根軸传轰，其中橫向的稱為主軸（main axis），縱向的稱為側(cè)軸（cross axis）谷婆。主軸的開始位置（與邊框的交叉點）叫做main start慨蛙，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start纪挎，結(jié)束位置叫做cross end期贫。子元素默認是沿主軸排列的。子元素在主軸方向的寬度叫做main size异袄，在側(cè)軸方向的高度叫做cross size通砍。
詳細參考flex布局
常見布局實例：
圣杯布局，如圖所示
HTML代碼：
<div class="demo">
<div class="header">頭部</div>
<div class="body">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">底部</div>
</div>
CSS代碼：
.demo{
display: flex;
flex-direction: column;
}
.demo div{
flex: 1;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20%!important;
}
固定百分比布局：
HTML代碼：
<div class="demo">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
(1) 等分布局：
image
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
（2）某一個固定
image
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
（3）某兩個固定
image
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
（4）三個固定
image
CSS代碼：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item1{
flex: 0 0 10%;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
流式布局 ，如下如所示：
image
image
HTML代碼如下：
<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS代碼：
.demo{
width: 258px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item{
flex: 0 0 33.333333%;
height: 80px;
box-sizing: border-box;
}
青蛙游戲
初始狀態(tài)
#pond {
display: flex;
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
justify-content:center;
align-content:space-between;
}
布局完成
