flex布局深入淺出

flex之前使用：

normal flow （文檔流）
float + clear
position fixed relative absolute
display：inline-block
負margin
....

這些屬性不僅多，麻煩，還互相影響，flex就不一樣了，flex一招制敵在於以下幾點：

1.塊級布局側重垂直布局，行內布局側重水平布局，flex布局與方向無關，只用其中一個屬性flex-direction便可自由控制，2.通過，felx-grow和 flex-shrink，flex屬性實現空間自由分配，3.通過align-items，justify-content實現自動對齊

4.通過order隨意改變元素順序，神通廣大

5.flex 適用於簡單的線性布局，更複雜的得靠另外一個大佬 grid，之後會有詳談我認為的重點：1.display:flex 可直接將子元素水平排列，無論是block還是inline，inline-*2.水平上布局一般justify-content,如果設置flex-direction:column，可影響垂直分布3.垂直布局一般 align-items,如果設置flex-direction:column，可影響水平分布4.想要左右兩個元素按比例佔滿容器：.first{flex:1} .second{flex:1.5} 表示左邊右邊是左邊的 1.5 倍5.align-content 表示多行時具體以什麼標準在整個容器內布局，這個屬性用的較少

下面屬性講解依賴於本圖：

一：flex:語法

1>.基本概念 Flexible Box 「彈性布局」設置後：float,clear,vertical-align將失效

2>.容器屬性 A.flex-direction：主軸方向 row | row-reverse | column | column-reverse;

PS:主軸由flex-direction 決定，設置為 column，主軸為豎著的，則align-items和justify-content反著起作用

B.flex-wrap：默認情況下，項目都排在主軸（main axis）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。 nowrap | wrap | wrap-reverse;

C.flex-flow : flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。 <flex-direction> <flex-wrap>

E.align-items:定義項目在交叉軸上如何對齊。 flex-start | flex-end | center | baseline | stretch（默認）;

3>.項目屬性 A.order：可改變項目的排列順序。數值越小，排列越靠前，默認為0。

B.flex-grow:定義項目的放大比例，默認為0，即如果存在剩餘空間，也不放大。

如果所有項目的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者佔據的剩餘空間將比其他項多一倍。

C.flex-shrink:定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

D.flex-basis:定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值為auto，即項目的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。

E.flex:flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。

none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

快捷鍵：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

二：flex練習1.骰子布局 3*3 約定：

所有置display:flex;可直接將所有子元素水平排列，且默認不換行，且寬度強制可變 1.單項目： a. 位置1：display:flex;默認首行左對齊， b. 位置2：justify-content:center; c. 位置3：justify-content:flex-end; d. 位置4：align-items : center; e. 位置5：justify-content:center;align-items:center; f. 位置6：justify-content:flex-end;align-items:center;

g. 位置7：justify-content:flex-start;align-items:flex-end;

f. 位置8：justify-content:center;align-items:flex-end g. 位置9：justify-content:flex-end;align-items:flex-end; 2.雙項目： a. 1,3位置：justify-content:space-between; b. 1,7位置：justify-content:space-between;flex-direction: column; c. 2,8位置：flex-direction: column;justify-content: space-between;align-items: center; d. 3,9位置：flex-direction: column;justify-content: space-between; align-items:flex-end; e. 1,5位置： item:nth-child(2){align-self:center} f. 1,9位置： box{justify-content:space-between}

item:nth-child(2){align-self:flex-end}

....

3.三項目： a. 1,5,9位置: box{justify-content:space-between} //可無 item:nth-child(2){align-self:center} item:nth-child(3){align-self:flex-end} b. 3,5,7位置：順序反寫 box{justify-content:space-between} //可無 item:nth-child(1){align-self:flex-end} item:nth-child(2){align-self:center} item:nth-child(3){align-self:flex-start} c.7,8,9位置： box{align-items: flex-end;} d.4,5,6位置： box{align-items: center;} ... 4.四項目： a. 1,2,3,9位置：flex-flow: wrap; justify-content: flex-end; align-content: space-between; b. 1,2,7,9位置;

<div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> .box{display:flex; flex-direction:column; justify-content:space-between} .column{display:flex;justify-content:space-between};

...

5.六項目： a. 123,789位置：flex:wrap; align-content:space-between; b. 147,369位置：display: flex; flex-direction: column; flex-wrap: wrap; align-content:space-between;

6.九項目：

flex-wrap: wrap; justify-content: space-between; align-content: space-between;

2.基本網格布局

主要在項目上用父容器設置 display:flex;子元素動態分割剩餘寬度 flex: flex-grow | flex-shrink | flex-basis; flex全為1，平均分配3.百分比布局某個網格的寬度為固定的百分比，其餘網格平均分配剩餘的空間。比如 .item{flex:1} .item2{flex:0 0 5px} .item3{flex: 0 0 50%}4.聖杯布局：左右固定，中間自適應

<header>頭部</header> <section> <div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div> </section> <footer>底部</footer>

CSS:

body{ display: flex; flex-flow: wrap column; } header,footer{ background-color: aqua; flex: 1; height: 8vh; } section{ display: flex; } .left,.right{ flex:0 0 150px; background-color: red }