說明：本文在內容結構部分引用自阮一峰-Flex 布局教程，但大部分內容做了修改和補充，并且重繪了所有圖例。

1 什么是flex布局？

flex是flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任意容器都可以定義為flex布局：

display: flex;

還有一種方式為display: inline-flex; 可以給行內元素添加flex布局，inline-flex和inline-block一樣，對內部元素來說是個display: flex 的容器，對外部元素來說是個inline的塊。

需要注意的是：容器被設為flex布局以后，子元素的float 、clear 和vertical-align屬性將失效。

2 基本概念

采用flex布局的元素，稱為flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為flex項目（flex item），簡稱“項目”，如下圖所示：



其中flex容器的包含水平主軸main axis和垂直交叉軸cross axis，容器中的項目默認從左到右按水平主軸的方向排列。每個flex項目的高度叫項目垂直高度cross size，寬度叫做項目水平寬度main size。

flex布局主要是設置flex容器的對齊方式和flex項目的大小形態，上圖中的四個概念十分重要。

3 容器的屬性

給容器設置display: flex;后，可以為其添加如下容器屬性：

• flex-direction：主軸方向；
• flex-wrap：項目換行方式；
• flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式；
• justify-content：項目在主軸的對齊方式；
• align-items：項目在交叉軸的對齊方式；
• align-content：多軸線對齊方式。

3.1 flex-direction

flex-direction屬性決定主軸的方向（即項目的排列方向），偽代碼如下：

.box {flex-direction: row | row-reverse | column | column-reverse; }

它有四種取值：

• row（默認值）：主軸為水平方向，從左到右排列。

• row-reverse：主軸為水平方向，從右到左排列，與row排列方向相反。

• column：主軸為垂直方向，從上到下排列。

• column-reverse：主軸為垂直方向，從下到到排列，與column排列方向相反。

3.2 flex-wrap

默認情況下，項目都排列在一條軸線上。flex-wrap屬性定義，如果一條軸線排不下的換行方式。偽代碼如下：

.box{flex-wrap: nowrap | wrap | wrap-reverse; }

它有三種取值：

• nowrap（默認）：不換行，即使一行放不下所有項目，任然不換行顯示，而是會自動縮小所有項目的寬度使所有項目能夠放置在一行。

• wrap：換行，第一行項目排列在上方。

• wrap-reverse：換行，第一行項目排列在下方。

3.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。偽代碼如下：

.box {flex-flow: <flex-direction> || <flex-wrap>; }

3.4 justify-content

justify-content屬性定義了項目在主軸上的對齊方式。偽代碼如下：

.box {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }

它有六種常見取值：

• flex-start（默認值）：項目左對齊：

• flex-end：項目右對齊：

• center：項目居中對齊：

• space-between：兩端對齊，項目之間的間隔都相等：

• space-around：空格環繞：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍：

• space-evenly：空格均分：每個項目兩側的間隔相等，項目之間的間隔比項目與容器邊框的間隔也相等：

3.5 align-items

align-items屬性定義項目在交叉軸上如何對齊。偽代碼如下：

.box {align-items: flex-start | flex-end | center | baseline | stretch; }

它有五種取值：

• flex-start：項目與交叉軸的起點（上邊緣）對齊。

• flex-end：項目與交叉軸的終點（下邊緣）對齊。

• center：項目與交叉軸的中點對齊。

• baseline：項目的第一行文字的基線對齊。

• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度，若設置了項目的高度，則按照設置的高度。

3.6 align-content

align-content屬性定義了多根軸線（容器中項目多行排列，每行排列叫做一根軸線）的對齊方式。如果項目只有一根軸線，該屬性不起作用。偽代碼如下：

.box {align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch ; }

它有七種取值，align-content和justify-content的屬性非常相似，若讀者熟悉justify-content，那么align-content的屬性非常好理解：

• flex-start：項目與交叉軸的起點（上邊緣）對齊：

• flex-end：項目與交叉軸的終點（下邊緣）對齊：

• center：項目與交叉軸的中線對齊：

• space-between：項目與交叉軸兩端對齊，軸線之間的間隔平均分布：

• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與容器邊緣的間隔大一倍：

• space-evenly：每根交叉軸之間的間隔平均分配：

• stretch（默認值）：當項目沒有設置高度時，軸線占滿整個交叉軸。

4 項目的屬性

上面所講的容器屬性都是用來設置項目的排列方式，而項目自身的大小和形態需要設置項目的屬性：

• order：定義項目的排列順序。數值越小，排列越靠前，默認為0；
• flex-grow：定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大；
• flex-shrink：定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小；
• flex-basis：定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
• flex：flex-grow, flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
• align-self：允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

4.1 order

默認情況下，項目的排列先后順序是按照DOM結構中出現的先后順序顯示的，而order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。偽代碼如下：

.item {order: <integer>; }

4.2 flex-grow

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。偽代碼如下：

.item {flex-grow: <number>; /* default 0 */ }

以下是flex-grow屬性的基本用法：

此外flex-grow屬性還可以用于倍數關系：

用于倍數關系時，需要注意項目不能縮小到比原來的寬度還要小：

4.3 flex-shrink

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。偽代碼如下：

.item {flex-shrink: <number>; /* default 1 */ }

4.4 flex-basis

flex-basis屬性定義了在分配主軸多余寬度之前，項目的初始寬度。瀏覽器根據這個屬性，計算主軸是否有多余寬度。它的默認值為auto，即項目的本來的寬度。偽代碼如下：

.item {flex-basis: <length> | auto; /* default auto */ }

flex-basis屬性可以看作width屬性的替代品，但是flex-basis屬性比width屬性的優先級要高，若一個項目同時設置了flex-basis和width，那么生效的是flex-basis。推薦閱讀：CSS width vs flex-basis。

4.5 flex

flex屬性是flex-grow, flex-shrink和flex-basis的簡寫，默認值為0 1 auto（默認縮小但不放大）。后兩個屬性可選。偽代碼如下：

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

flex屬性的常見簡寫如下：

flex: 1：等價于flex: 1 1 auto，即等價于單獨設置flex-grow: 1；

flex: auto：等價于flex: 1 1 auto；

flex: none：等價于flex: 0 0 auto。

4.6 align-self

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

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }

使用方法可以參照3.5節中的align-items屬性用法，下面舉個例子，每個項目可以單獨設置自己的交叉軸對齊方式：

5 總結

理解flex布局，主要要理解容器和項目兩個概念，給容器設置屬性用來決定容器中的項目如何排列，如主軸方向、是否換行、主軸和交叉軸的對齊方式等，可以理解為宏觀的設定。而給項目設置屬性用來決定項目的大小形態順序，可以理解為微觀的設定。

最后推薦一個flex布局可視化工具：https://loading.io/flexbox

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的图解flex布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。