CSS display: flex佈局
來源 https://zhuanlan.zhihu.com/p/646436119前言
早期CSS佈局依賴display屬性+position屬性+float屬性。它對特殊的佈局非常不方便，如，垂直居中。
於是，W3C在2009年提出了一種新的方案——Flex方案，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，我們可以大膽地使用它。
Flex佈局是什麼
Flex 是 Flexible Box 的縮寫，意為"彈性佈局"
任何元素都能設定 display:flex，如，給div此類塊級元素設定 display:flex 或給 span 行級元素設定 display:inline-flex。
flex、inline-flex兩者區別在於：inline-flex容器為inline特性，因此可以和圖片文字一行顯示；flex容器保持塊級元素特性，寬度預設100%，不和行級元素一行顯示。
Flex佈局相關屬性分為兩類，一類作用於flex容器本身上，另一類作用於flex子元素上。
| 作用於flex容器上 | 作用於flex子元素上 |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| ### flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
該兩類屬性都是控制flex子元素的佈局，不同的是作用於flex容器上控制的是整體，作用於flex子元素上控制的是個體。
作用在flex容器上的CSS屬性
flex-direction
flex-direction決定主軸方向（子元素的排列方向）
.box{
display:flex;
flex-direction:row | row-reverse | column | column-reverse;
}
它有4個值:
row（預設值）：主軸為從左到右方向;
row-reverse：主軸為從右到左方向;
column：主軸為垂直方向，從上到下;
column-reverse：主軸為垂直方向，從下到上。
flex-wrap
flex-wrap決定是否換行。
.box{
display:flex;
flex-wrap:nowrap | wrap ｜ wrap-reverse
}
它有3個值:
nowrap（預設值）：不換行，如果總寬度超過了父盒子，成員將被擠壓；
wrap： 換行，第一行在上方；
wrap-reverse：換行，第一行在下方。
flex-flow屬性是flex-direction屬性與flex-wrap屬性的簡寫形式，預設為row nowrap
.box {
display:flex;
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content屬性決定子元素在主軸上的對齊方式。
.box {
display:flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
它有6個值：
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，子元素之間的間隔都相等。
space-around：環繞，每個子元素兩側都環繞互不干擾的等寬的空白間距
- space-evenly：勻稱、平等，每個子元素兩側空白間距完全相等
假設主軸預設，方向為從左到右。
可用，請點選這裡體驗: https://code.juejin.cn/pen/7259946435871768576
align-items
align-items屬性定義子元素交叉軸方向上的對齊方式，交叉軸理解為垂直方向。
.box {
display:flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}
它有5個值：
- stretch（預設值）：flex子項拉伸。在演示中我們可以看到冰冰圖片高度是撐滿flex容器高度的，就是因為flex子項的高度拉伸到容器高度導致。如果flex子項設定了高度，則按照設定的高度值渲染，而非拉伸；
flex-start：容器頂部對齊；
flex-end：容器底部對齊；
center：容器垂直居中對齊；
baseline：表現為所有flex子項都相對於flex容器的基線對齊。
請點選這裡體驗: https://code.juejin.cn/pen/7260042327489118265
align-content
align-content、justify-content它們是相似且對立的屬性，justify-content指明水平方向flex子項的對齊和分佈方式，而align-content則是指明垂直方向每一行flex元素的對齊和分佈方式。如果所有flex子項只有一行，則align-content屬性是沒有任何效果的。
.box {
display:flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}
它有7個值：
stretch（預設值）：flex子項拉伸。在演示中我們可以看到冰冰圖片高度是撐滿flex容器高度的，就是因為flex子項的高度拉伸到容器高度導致。如果flex子項設定了高度，則按照設定的高度值渲染，而非拉伸；
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，子元素之間的間隔都相等。
space-around：環繞，每個子元素兩側都環繞互不干擾的等寬的空白間距
space-evenly：勻稱、平等，每個子元素兩側空白間距完全相等
請點選這裡體驗: https://code.juejin.cn/pen/7260070587291795468
作用於flex子元素上
order
order屬性規定flex容器內子元素佈局的順序，預設為0
.children{
order:0;/* 整數值，預設值是 0 */
}
所有的flex子元素預設order為0，如果我們想將某個子元素放置在最前面展示，即設定比0更小的整數，如-1就可以。
現在我們有四張冰冰的美圖，將其中編號為3的圖片元素order屬性分別設定為-1,1。看其排序順序變化。
可以點選這裡體驗：https://code.juejin.cn/pen/7260110936554340389
flex-grow
flex-grow屬性定義了該元素在flex容器的放大比例，如果為0，即使有剩餘空間也不會放大。
.children{
flex-grow:1;/* 數值，可以是小數，預設值是 0 */
}
flex-grow不支援負值，預設為0，表示不佔用剩餘的空白間隙擴充套件自己的寬度。如果所有的flex容器子元素flex-grow屬性都是1，則它們將等分剩餘空間（如果有的話）。如果一個子元素的flex-grow屬性為2，其他子元素都為1，則前者佔據的剩餘空間將比其他子元素多一倍。
dome案例：
flex容器寬度為500px，四張冰冰圖片的總寬為400px，每張圖片寬度為100px，即flex容器剩餘空間還有100px；當給編號為3的冰冰設定flex-grow屬性值分別為0、0.25、0.5、1時，編號3的冰冰寬度變化為100、100+0.25*100 、100+0.5*100、100+100*1。
可以點選這裡體驗: https://code.juejin.cn/pen/7260115757248774181
flex-shrink
flex-shrink屬性定義flex容器空間不足時，元素的縮小比例，預設為1，即如果空間不足，該元素將縮小。
.children {
flex-shrink: 1; /* 預設 1，負值無效 */
}
如果所有子元素的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他子元素都為1，則空間不足時，前者不縮小。
、
可以點選這裡體驗：https://code.juejin.cn/pen/7260310379580882979
flex-basis
flex-basis定義在分配剩餘空間之前元素預設的大小，瀏覽器根據這個屬性，計算主軸是否有多餘空間。預設值為auto,即元素本來大小
.children {
flex-basis:350px | auto; /* 預設auto */
}
它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
flex
flex屬性是flex-grow，flex-shrink和flex-basis的縮寫，預設值為0 1 auto。
.children{
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
flex預設值等同於flex:0 1 auto；
flex:none等同於flex:0 0 auto；
flex:auto等同於flex:1 1 auto。
align-self
align-self屬性允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.children{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性有6個值，除了auto（預設值），其他都與align-items屬性完全一致。
該dome中flex容器設定了align-items:center。
可以點選這裡體驗：https://code.juejin.cn/pen/7260331350761144357
來源 https://zhuanlan.zhihu.com/p/646436119