1、flex布局與傳統(tǒng)布局的區(qū)別
傳統(tǒng)布局：
- 兼容性好但是布局繁瑣
- 局限性，不能再移動(dòng)端很好的布局
flex布局：
- 操作方便，布局簡單，移動(dòng)端應(yīng)用廣泛
- 但是IE11或更低版本不支持flex布局
使用范圍：
1、如果是PC端頁面布局，建議使用傳統(tǒng)布局
2、如果是移動(dòng)端或者不考慮兼容性問題的PC端，建議使用flex彈性布局
2、flex布局原理
flex意為彈性布局，通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式，用來為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局
flex布局注意事項(xiàng)
- 當(dāng)我們?yōu)楦负凶釉O(shè)為flex布局后，子元素的float、clear、和vertical-align屬性都將會(huì)失效
- 伸縮布局 = 彈性布局 = flex布局
3、flex布局父項(xiàng)常見屬性（設(shè)置在父元素上的屬性）
- flex-direction：設(shè)置主軸的方向
- justify-content：設(shè)置主軸上的子元素的排列方式
- flex-wrap：設(shè)置子元素是否換行
- align-content：設(shè)置側(cè)軸上的子元素的排列方式(多行)
- align-items：設(shè)置側(cè)軸上的子元素排列方式(單行)
- flex-flow：復(fù)合屬性，相當(dāng)于同時(shí)設(shè)置了flex-direction和flex-wrap
3.1、flex-direction(設(shè)置主軸的方向)
在flex布局中，有主軸和側(cè)軸的概念之分，即所謂的行與列，默認(rèn)的主軸方向是從左往右，默認(rèn)的側(cè)軸方向是從上往下。flex-direction屬性決定主軸的方向，也就是決定著子元素的排列方向，其中，主軸和側(cè)軸是會(huì)變化的，就看flex-direction設(shè)置誰作為主軸，子元素就會(huì)跟著作為主軸的來排列布局。
| 屬性值 | 說明 |
|---|---|
| row | 默認(rèn)值從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從下到上 |
設(shè)置側(cè)軸排列
.container {
display: flex;
width: 1200px;
height: 600px;
margin: 0 auto;
background-color:cornsilk;
/*設(shè)置為側(cè)軸排列*/
flex-direction: column;
}
.container span {
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: cornflowerblue;
}
<div class="container">
<span>東</span>
<span>南</span>
<span>西</span>
<span>北</span>
</div>
效果圖.png
3.2、justify-content(設(shè)置主軸上的子元素的排列方式)
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式，使用前提必須確定好誰是主軸.
| 屬性值 | 說明 |
|---|---|
| flex-start | 默認(rèn)值，從頭部開始，如果主軸是X軸，則從左往右 |
| flex-end | 從尾部開始排列 |
| center | 在主軸居中對(duì)齊(如果主軸是X軸則水平居中) |
| space-around | 平分父級(jí)空間排列 |
| space-between | 先兩邊貼邊，再去平分剩下的空間排列 |
.flexStart {
display: flex;
width: 300px;
height:80px;
margin: 0 auto;
background-color:cornsilk;
/*設(shè)置子元素排列方式*/
justify-content: flex-start;
/*設(shè)置為側(cè)軸排列*/
flex-direction: row;
}
.flexStart span {
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
<div class="flexStart">
<span>東</span>
<span>南</span>
<span>西</span>
<span>北</span>
</div>
效果圖示.png
3.3、flex-wrap(設(shè)置子元素是否換行)
默認(rèn)情況下，子元素都排在一條線上（主軸），flex-wrap屬性定義，flex布局中默認(rèn)是不換行的。意味著隨著子元素不斷增加，會(huì)直接改變子元素的寬高，不斷地?cái)D在一行上。
| 屬性值 | 說明 |
|---|---|
| nowrap | 默認(rèn)值，不換行 |
| wrap | 換行 |
.wrapBefore {
display: flex;
width: 300px;
height: 80px;
margin: 0 auto;
background-color: cornsilk;
/*設(shè)置元素是否換行*/
flex-wrap: nowrap;
/*設(shè)置子元素排列方式*/
justify-content: space-between;
/*設(shè)置為側(cè)軸排列*/
flex-direction: row;
}
.wrapAfter {
display: flex;
width: 300px;
height: 80px;
margin: 0 auto;
background-color: cornsilk;
/*設(shè)置元素是否換行*/
flex-wrap: wrap;
/*設(shè)置子元素排列方式*/
justify-content: space-between;
/*設(shè)置為側(cè)軸排列*/
flex-direction: row;
}
.wrapBefore span, .wrapAfter span {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
<h3>換行前</h3>
<div class="wrapBefore">
<span>東</span>
<span>南</span>
<span>西</span>
<span>北</span>
<span>多的</span>
</div>
<h3>換行后</h3>
<div class="wrapAfter">
<span>東</span>
<span>南</span>
<span>西</span>
<span>北</span>
<span>多的</span>
</div>
效果.png
3.4、 align-items(設(shè)置側(cè)軸上的子元素排列方式(單行))
align-items設(shè)置側(cè)軸上的子元素的排列方式(單行的)，這個(gè)屬性是控制子元素在側(cè)軸(默認(rèn)是y軸)上的排列方式，在子元素為單個(gè)元素的時(shí)候去使用。
| 屬性值 | 說明 |
|---|---|
| flex-start | 默認(rèn)值，從上到下 |
| flex-end | 從下到上 |
| center | 垂直居中 |
| stretch | 拉伸 |
.flexstart {
display: flex;
width: 300px;
height: 80px;
margin: 0 auto;
background-color: cornsilk;
/*設(shè)置子元素側(cè)軸對(duì)齊方式*/
align-items: flex-start;
/*設(shè)置元素是否換行*/
flex-wrap: nowrap;
/*設(shè)置子元素排列方式*/
justify-content: space-between;
/*設(shè)置為側(cè)軸排列*/
flex-direction: row;
}
.flexstart span, .flexEnd span, .center span {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
.stretch span {
width: 70px;
text-align: center;
line-height: 30px;
margin-right: 1px;
background-color: blueviolet;
}
<div class="flexstart">
<span>東</span>
<span>南</span>
<span>西</span>
<span>北</span>
</div>
效果.png
這里有個(gè)特別需要注意的點(diǎn)：在使用拉伸的時(shí)候，千萬不能給子元素設(shè)置高度，否則它是無法進(jìn)行拉伸的。
3.5、 align-content(設(shè)置側(cè)軸上的子元素排列方式(多行))
設(shè)置子元素在側(cè)軸上的排列方式，并且只能用于子元素出現(xiàn)在換行的情況中，在單行下是沒有任何效果的。
| 屬性值 | 說明 |
|---|---|
| flex-start | 默認(rèn)值在側(cè)軸的頭部開始排列 |
| flex-end | 在側(cè)軸的尾部開始排列 |
| center | 在側(cè)軸中間顯示 |
| space-around | 子元素在側(cè)軸上平分側(cè)軸空間 |
| space-between | 子元素在側(cè)軸上先分布在兩頭，再去平分剩余空間 |
| stretch | 設(shè)置子元素高度平分父級(jí)元素的高度 |
.flexstart {
display: flex;
width: 300px;
height: 200px;
margin: 0 auto;
background-color: cornsilk;
/*設(shè)置子元素側(cè)軸對(duì)齊方式*/
align-content: flex-start;
/*設(shè)置元素是否換行*/
flex-wrap: wrap;
/*設(shè)置子元素排列方式*/
justify-content: space-between;
/*設(shè)置為側(cè)軸排列*/
flex-direction: row;
}
.flexstart span {
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
margin-top: 1px;
margin-right: 1px;
background-color: blueviolet;
}
圖1.png
圖2.png
3.6、 flex-flow(設(shè)置主軸方向以及設(shè)置是否換行，一種復(fù)合寫法)
flex-flow屬性是flex-direction和flex-wrap屬性的復(fù)合屬性
flex-flow:row wrap; //主軸為x軸，并且換行
4、flex布局子項(xiàng)常見屬性（設(shè)置在子元素上的屬性）
flex布局中子元素也存在著相對(duì)應(yīng)的一些屬性
4.1、flex(子元素占的份數(shù))
flex屬性定義子元素分配剩余空間，用flex來表示占的多少份，默認(rèn)為0
針對(duì)這個(gè)，可以先了解有名的CSS布局圣杯布局以及雙飛翼布局,大致的效果為兩邊盒子固定，中間自適應(yīng)。使用flex布局來做的話，就是去處理剩余空間的份數(shù)。
.demo {
display: flex;
width: 60%;
height: 200px;
/*margin: 0 auto;*/
border: 1px solid darkblue;
background-color: azure;
}
.demo div:nth-child(1){
width: 100px;
height: 100%;
text-align: center;
line-height: 200px;
background-color: chocolate;
}
.demo div:nth-child(3){
width: 100px;
height: 100%;
text-align: center;
line-height: 200px;
background-color: chocolate;
}
.demo div:nth-child(2){
flex: 1;
height: 100%;
text-align: center;
line-height: 200px;
background-color: blueviolet;
}
<div class="demo">
<div>左側(cè)</div>
<div>中間</div>
<div>右側(cè)</div>
</div>
css平分剩余空間.gif
4.2、align-self(控制子元素自己在側(cè)軸上的排列方式)
align-self屬性允許單個(gè)的子元素與其他子元素不一樣的對(duì)齊方式，可覆蓋align-items屬性，默認(rèn)值為auto，表示繼承父元素的align-item屬性，如果沒有父元素，則等同于stretch。
.demo {
display: flex;
width: 60%;
height: 200px;
margin: 0 auto;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
background-color:bisque;
}
.demo div {
width: 15%;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blueviolet;
}
.demo div:nth-child(2){
/*讓第二個(gè)子元素flex-end排列*/
align-self: flex-end;
}
第二個(gè)子元素flex-end排列.png
4.3、order(控制子元素的排列順序)
order去控制子元素的排列順序，數(shù)值越小的，排列越靠前，默認(rèn)為0
.demo {
display: flex;
width: 60%;
height: 200px;
margin: 0 auto;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
background-color:bisque;
}
.demo div {
width: 15%;
height: 80px;
text-align: center;
line-height: 80px;
order: 2;
background-color: blueviolet;
}
.demo div:nth-child(2){
/*讓第二個(gè)子元素flex-end排列*/
align-self: flex-end;
/*將第二個(gè)放前面去,order設(shè)置小即可*/
order: 1;
}
首先給每個(gè)子元素設(shè)置一個(gè)order值，需要調(diào)到前面的，單獨(dú)提出來將order值設(shè)小點(diǎn)即可，想要放到后面order值設(shè)大點(diǎn)即可。
將第二個(gè)放前面去.png
