文章目錄
簡介
Flex 是個非常好用的屬性，特別是對多個子元素的排列來說十分的方便，就是它對應的屬性非常多，理解起來不是十分的容易，本篇文章將詳細介紹Flex的用法；目前各主流瀏覽器對Flex的支持還算是不錯的，它的各大瀏覽器兼容性情況見下表（來自：https://caniuse.com/#search=display%3Aflex）：
注意：
- 設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效
- Flex佈局的子元素之間的margin不會合並取最大值，而是會相加
取值
display屬性
.box{
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
/*行內flex*/
.box{
display: -webkit-inline-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: inline-flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
容器樣式屬性列舉
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主軸方向：左到右（默認） | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*換行：不換行（默認） | 換行 | 換行並第一行在下方*/
flex-flow: <flex-direction> || <flex-wrap>;
/*主軸方向和換行簡寫*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主軸對齊方式：靠近主軸起始方向（默認） | 靠近主軸尾部方向 | 居中對齊 | 兩端對齊 | 平均分佈*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊方式：靠近交叉軸起始方向 | 靠近交叉軸尾部方向 | 居中對齊 | 子元素的第一行文字的基線對齊 | 如果子元素未設置高度或設爲auto，將佔滿整個容器的高度；當交叉軸爲水平時，則是寬度（默認）*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主軸對齊方式：靠近交叉軸起始方向 | 靠近交叉軸尾部方向 | 居中對齊 | 兩端對齊，軸線之間的間隔平均分佈 | 每根軸線兩側的間隔都相等 | 軸線佔滿整個交叉軸（默認）*/
}
子元素屬性列舉
.item{
order: <integer>;
/*排序：數值越小，越排前，默認爲0*/
flex-grow: <number>; /* default 0 */
/*放大：默認0（即如果有剩餘空間也不放大，值爲1則放大，2是1的雙倍大小，以此類推）*/
flex-shrink: <number>; /* default 1 */
/*縮小：默認1（如果空間不足則會縮小，值爲0不縮小）*/
flex-basis: <length> | auto; /* default auto */
/*固定大小：默認爲auto，可以設置px值，也可以設置百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*單獨對齊方式：自動（默認） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/
}
容器各屬性詳解
主軸方向
主軸方向通過flex-direction屬性定義。所謂主軸，就是容器內子元素的排列的方向，可取的值有四個：
| 值 | 含義 |
|---|---|
| row | 左到右（默認） |
| row-reverse | 右到左 |
| column | 上到下 |
| column-reverse | 下到上 |
主軸對齊方式
justify-content屬性定義了子元素在主軸上的對齊方式
| 值 | 含義 |
|---|---|
| flex-start | 靠近主軸起始方向（默認） |
| flex-end | 靠近主軸尾部方向 |
| center | 居中對齊 |
| space-between | 兩端對齊，靠近邊緣；子元素之間的距離相等 |
| space-around | 每個子元素兩側的間隔相等。所以，子元素之間的間隔是子元素到盒子邊緣距離的兩倍 |
交叉軸對齊方式
align-items屬性定義交叉軸的對齊方式。我們上面說了什麼是主軸，那麼什麼是交叉軸呢？交叉軸的就是和主軸相交90度的軸，如果主軸是水平的，則交叉軸是從上到下的一個軸；如果主軸是垂直的，則交叉軸是從左到右的一個軸。如下圖所示：
交叉軸對齊方式：
| 值 | 含義 |
|---|---|
| flex-start | 靠近交叉軸起始方向 |
| flex-end | 靠近交叉軸尾部方向 |
| center | 居中對齊 |
| baseline | 子元素的第一行文字的基線對齊 |
| stretch | 如果子元素未設置高度或設爲auto，將佔滿整個容器的高度；當交叉軸爲水平時，則是寬度（默認） |
換行方式
默認情況下，所有的子元素都排在一行軸線上，如果排列不了的話，會通過壓縮子元素的寬或高使其排下（不會使得子元素裏的文本超出子元素）。flex-wrap屬性定義瞭如果一條軸線排不下，如何換行
| 值 | 含義 |
|---|---|
| nowrap | 不換行（默認） |
| wrap | 第一行靠近交叉軸起始方向 |
| wrap-reverse | 第一行靠近交叉軸末尾方向 |
多主軸對齊方式
align-content屬性定義了多根主軸的對齊方式。如果項目只有一根主軸，該屬性不起作用。
| 值 | 含義 |
|---|---|
| flex-start | 與交叉軸的起點對齊 |
| flex-end | 與交叉軸的終點對齊 |
| center | 居中對齊 |
| space-between | 與交叉軸兩端對齊，軸線之間的間隔平均分佈 |
| space-around | 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍 |
| stretch | 軸線佔滿整個交叉軸（默認） |
子元素各屬性詳解
子元素排序屬性
order屬性定義子元素的排列順序。數值越小，排列越靠前，默認爲0。即子元素不再按照html文檔的順序排列，而是根據這個值的大小重新排列
order: <integer>; /*默認爲0*/
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
margin: 60px;
height: 220px;
width: 450px;
border: 2px solid blue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
height: 40px;
background-color: red;
margin: 2px;
}
</style>
</head>
<body>
<div class="border">
<div class=item style="order:2">1（order：2）</div>
<div class=item style="order:6">2（order：6）</div>
<div class=item style="order:6">3（order：6）</div>
<div class=item style="order:3">4（order：3）</div>
<div class=item style="order:9">5（order：9）</div>
<div class=item style="order:0">6（order：0）</div>
<div class=item style="order:2">7（order：2）</div>
<div class=item style="order:1">8（order：1）</div>
<div class=item style="order:7">9（order：7）</div>
<div class=item style="order:8">10（order：8）</div>
</div>
</body>
</html>
運行：
子元素放大屬性
flex-grow定義子元素的放大屬性，默認爲0。這個值是什麼意思呢，就是當子元素都排列到主軸後，如果主軸上還有剩餘的空間，則這個值的大小就關係到主軸剩餘空間的分配問題。如果爲0，表示該子元素對剩餘空間沒興趣，不參與分配；如果大於0，表示有興趣，需要參與分配，那麼第n個子元素最後分配的剩餘空間比例就是：flex-grow(n) / (flex-grow(1)+flex-grow(2)+.....flex-grow(n))
注意：
- 這個放大指的是沿主軸方向變大。比如當主軸爲水平時，則放大的是子元素的寬
flex-grow: <number>; /* default 0 */
子元素縮小屬性
flex-shrink屬性定義了子元素的縮小比例，默認爲1，即如果空間不足，該子元素將縮小。如果所有子元素的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。
注意：
- 這個放大指的是沿主軸方向縮小。比如當主軸爲水平時，則縮小的是子元素的寬
- 如果子元素裏面有內容，則不會一直將子元素的寬縮小到0；子元素能夠縮小的最小寬度和子元素裏面的內容有關
- 元素的margin不會縮小，就算子元素的寬變爲0，margin仍然存在
子元素固定大小屬性
flex-basis屬性定義了在分配多餘空間之前，子元素佔據的主軸空間（main size）。它的默認值爲auto，即子元素的本來大小。
注意：
- 瀏覽器根據這個屬性，計算主軸是否有多餘空間
- 它只是一個建議值，並不是絕對的，當主軸的空間不夠時，會擠壓其它子元素的空間
- 它可以設爲固定的值（比如350px），也可以通過百分比設置值
子元素單獨交叉軸對齊方式
align-self屬性允許單個子元素有與其他子元素不一樣的交叉軸對齊方式，可覆蓋容器的align-items屬性。默認值爲auto，表示繼承容器的align-items屬性
| 值 | 含義 |
|---|---|
| auto | 繼承容器的align-items屬性（默認） |
| flex-start | 靠近交叉軸起始方向 |
| flex-end | 靠近交叉軸尾部方向 |
| center | 居中對齊 |
| baseline | 子元素的第一行文字的基線對齊 |
| stretch | 如果子元素未設置高度或設爲auto，將佔滿整個容器的高度；當交叉軸爲水平時，則是寬度 |
跟容器設置的交叉軸對齊方式一樣，這裏就不贅述了，舉個簡單的例子吧：
