一站式解決布局煩惱——Flex

網頁布局（layout）是 CSS 的一個重點應用，也是很多新人（包括我）很頭疼的問題。在Flex布局到來之前，通常需要用很多種屬性組合才能達到想要的效果。然而，CSS各種屬性組合之間互相影響，如果對文檔流及各種定位機制了解的不夠深入，很難做出理想的布局效果。Flex到來之後，這一切都變得簡單起來，這篇文章就介紹下這種全新的布局方法。

css各種屬性之間相互影響見

方應杭：CSS 為什麼這麼難學？?

zhuanlan.zhihu.com

常見的布局方式有：

• 固定寬度布局
• 彈性（fluid）布局
• 響應式布局 —— 多終端（PC、Pad、Phone）

布局實例

單欄布局

• 一欄布局 [demo](JS Bin)
• 一欄布局(通欄) demo

內部元素水平居中

• 一塊居中demo
• 多塊居中demo
• 多塊居中(無間隙)
• 用flex demo
• 不用flex demo

雙列布局

• 一列寬度固定，一列寬度自適應
• demo

三列布局

• 兩側兩列固定寬度，中間列自適應寬度
• demo

總結

在Flex之前，我們主要採用什麼方式布局呢，主要是以下幾種的組合：

1. normal flow（正常流，也叫普通流）
2. float + clear
3. position relative + absolute
4. display inline-block
5. 負margin

Flex布局

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。

• 特點
• 塊級布局側重於垂直方向，行內布局側重於水平方向，flex布局是與方向無關的
• flex布局可以實現空間自動分配，自動對齊(flexible:彈性，靈活)
• flex適用於簡單的線性布局，更複雜的布局應交給grid布局
• Flex布局基本概念

採用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

容器（container）默認存在兩根軸：主軸（main axis）和側軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；側軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

• 共10個知識點，具體見下圖

與Flex布局相關的屬性一共有12個，不要被嚇到，其實很好明白。

首先是與容器（container）相關的6個屬性：

Flex Container屬性

如下圖所示，主要記四個(1 2 4 5)

1. flex-direction

flex-direction屬性決定主軸的方向（即項目的排列方向）。為什麼說Flex布局與方向無關，就是因為該屬性。它共有以下幾個值：

row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。

2. flex-wrap

因為Flex布局是空間自動分配，默認情況下當空間不足時，元素不會換行且會自動壓縮，flex-wrap屬性決定了當空間不足時元素是否換行。它可能的取值有3個。

1. wrap：換行，第一行在上方。

1. wrap-reverse：換行，第一行在下方。

3. flex-flow

flex-flow是上面兩種屬性的簡寫，如

.box { flex-flow: row wrap;}

4. justify-content

justify-content屬性定義了項目(items)在主軸方向的對齊方式,可能的取值有5個

1. flex-start（默認值）：左對齊2. flex-end：右對齊3. center： 居中4. space-between：兩端對齊，項目之間的間隔都相等。5. space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5. align-items屬性

align-items屬性定義項目(items)在側軸上如何對齊。可能的取值有5個。

1. flex-start：側軸的起點對齊。2. flex-end：側軸的終點對齊。3. center：側軸的中點對齊。4. baseline: 項目的第一行文字的基線對齊。5. stretch（默認值）：如果項目未設置高度或設為auto，將佔滿整個容器的高度。items的高度固定的話，align-items:stretch不起作用

6. align-content屬性

align-content屬性定義了多根軸線（即多行）的對齊方式。如果項目只有一根軸線，該屬性不起作用。該屬性用到的機會不多，了解即可。可能取值6個

1. flex-start：側軸的起點對齊。2. flex-end：側軸的終點對齊。3. center：與側軸的中點對齊。4. space-between：與側軸兩端對齊，軸線之間的間隔平均分布。5. space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。6. stretch（默認值）：軸線佔滿整個側軸。

align-content和align-items屬性容易混淆，我的理解是align-items控制所有元素在側軸上整體的位置，所有元素會由於align-items值的改變步調一致的改變位置。而 align-content控制的是行與行（假定主軸是橫向的）之間位置的關係，每一行的位置會因為align-content值的改變而單獨改變

接下來是項目(items)相關的屬性

Flex iteam屬性

• 如下圖所示，主要記（1,2,3,5,6）

1. flex-grow屬性

flex-grow屬性定義項目的放大比例，即存在剩餘空間時，各個項目按照什麼比例分配剩餘空間，默認為0，即如果存在剩餘空間，也不放大。

2. flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，即空間不足時，各個項目按照什麼比例縮小，默認為1，即如果空間不足，該項目將縮小。

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

3. flex-basis屬性

flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值為auto，即項目的本來大小。

4.flex屬性

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

5.align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

auto | flex-start | flex-end | center | baseline | stretch;

6. order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。有了這個屬性，徹底告別雙飛翼布局和聖杯布局（這兩個布局方式我基本上每次想寫都要去查，從來記不住）

這篇博客大量參考了阮一峰老師的博客，很多圖片都是直接拿來用。剛開始寫，自己總結的經驗還不夠。希望多多包涵，感謝阮一峰老師詳細而又易懂的博客，下面附上鏈接。

• 阮一峰博客

Flex 布局教程：語法篇 - 阮一峰的網路日誌?

www.ruanyifeng.comFlex 布局教程：實例篇 - 阮一峰的網路日誌?

www.ruanyifeng.com

• 其他參考

方應杭：CSS 為什麼這麼難學？?

zhuanlan.zhihu.com若愚：CSS Grid 系列(上)-Grid布局完整指南?

zhuanlan.zhihu.com若愚：CSS Grid 系列(下)-使用Grid布局構建網站首頁?

zhuanlan.zhihu.com
推薦閱讀：