flex布局API眾多，記錄一下API方法和使用，為了方便日常開發和記憶。

彈性盒子

給div等塊級元素設置display:flex或span等內聯元素設置display:inline-flex，彈性盒子flex布局就生成了。這里借用官網說明：

1. 彈性容器(Flex container)

包含著彈性項目的父元素。通過設置 display 屬性的值為 flex 或 inline-flex 來定義彈性容器。

2. 彈性項目(Flex item)

彈性容器的每個子元素都稱為彈性項目。彈性容器直接包含的文本將被包覆成匿名彈性單元。

3. 軸(Axis)

每個彈性框布局包含兩個軸。彈性項目沿其依次排列的那根軸稱為主軸(main axis)。垂直于主軸的那根軸稱為側軸(cross axis)。

• flex-direction 確立主軸。
• justify-content 定義了在當前行上，彈性項目沿主軸如何排布。
• align-items 定義了在當前行上，彈性項目沿側軸默認如何排布。
• align-self 定義了單個彈性項目在側軸上應當如何對齊，這個定義會覆蓋由 align-items 所確立的默認值。

4. 方向(Direction)

彈性容器的主軸起點(main start)/主軸終點(main end)和側軸起點(cross start)/側軸終點(cross end)描述了彈性項目排布的起點與終點。它們具體取決于彈性容器的主軸與側軸中，由 writing-mode 確立的方向（從左到右、從右到左，等等）。

• order 屬性將元素與序號關聯起來，以此決定哪些元素先出現。
• flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的簡寫，決定彈性項目如何排布。

5. 行(Line)

根據 flex-wrap 屬性，彈性項目可以排布在單個行或者多個行中。此屬性控制側軸的方向和新行排列的方向。

6. 尺寸(Dimension)

根據彈性容器的主軸與側軸，彈性項目的寬和高中，對應主軸的稱為主軸尺寸(main size) ，對應側軸的稱為 側軸尺寸(cross size)。

• min-height 與 min-width 屬性初始值將為 0。
• flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫，描述彈性項目的整體的伸縮性。

索引屬性

這些屬性都是控制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容器屬性

1. flex-direction

flex-direction用來控制整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。

語法：

flex-direction: row | row-reverse | column | column-reverse; 復制代碼

row

默認值，默認是當前水平文檔流方向即從左到右排列。（受direction影響）

row-reverse

方向與row相反。

column

顯示為列即從上到下排列。

column-reverse

方向與column相反。

請點擊demo查看效果

2. flex-wrap

flex-wrap用來控制子項整體單行顯示還是換行顯示。

語法：

flex-wrap: nowrap | wrap | wrap-reverse; 復制代碼

nowrap

默認值，表示單行顯示，不換行。

wrap

寬度不足換行顯示。

wrap-reverse

寬度不足換行顯示。換行方向是從下到上與wrap相反。

請點擊demo查看效果

3. flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

語法：

flex-flow: <'flex-direction'> || <'flex-wrap'> 復制代碼

給容器設置如下樣式：

.flex{flex-flow: row-reverse wrap-reverse; } 復制代碼

4. justify-content

justify-content用來控制子項整體的對齊和分布方式。

語法：

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; 復制代碼

flex-start

默認值，默認表現為左對齊。

flex-end

默認表現為右對齊。

center

表現居中對齊。

space-between

表現為兩端對齊。

space-around

表現為每個子項均勻分布，左右兩側子項的空白只有中間子項空白寬度的一半。視覺上空間不相等，但每個子項的空間相等（子項兩側的空白間距）

space-evenly

表現為每個子項均勻分布，子項兩側空白間距完全相等。視覺上兩個子項之間的間距（以及到邊緣的空間）相等。

請點擊demo查看效果

5. align-items

align-items用來控制子項整體相對于容器的垂直對齊方式。

語法：

align-items: stretch | flex-start | flex-end | center | baseline; 復制代碼

stretch

默認值。子項高度拉伸整個容器，如果子項設置了高度值，則按照設置的高度值渲染。

flex-start

表現為容器頂部對齊。

flex-end

表現為容器底部對齊。

center

表現為垂直居中對齊。

baseline

表現為子項都相對于容器的基線（字母x的下邊緣）對齊。

請點擊demo查看效果

6. align-content

與just-content屬性類似，不同的是align-content作用于垂直方向子項的對齊和分布方式。如果所有子項只有一行，則align-content屬性沒有任何效果。

語法：

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly; 復制代碼

stretch

默認值。每一行子項都等比例拉伸鋪滿整個容器。

flex-start

表現為頂部堆疊。

flex-end

表現為底部堆疊。

center

表現為子項整體垂直居中對齊。

space-between

表現為上下兩行兩端對齊。

space-around

表現與justify-content的space-around一致，方向為垂直方向而已。

space-evenly

表現與justify-content的space-evenly一致，方向為垂直方向而已。

請點擊demo查看效果

flex子項屬性

1. order

order屬性用來控制子項在布局時的順序。子項元素按照order屬性的值的增序進行排列。

語法：

order: <integer>; /* 整數值，默認為0 */ 復制代碼

請點擊demo查看效果

2. flex-grow

flex-grow屬性用于放大子項的空間占用比例。

語法：

flex-grow: <number>; /* 數值，可以是小數，默認0 */ 復制代碼

flex-grow不支持負數，默認值是0。當flex-grow大于0，則分配規則如下：

所有剩余空間大小為1。

如果只設置了一個子項的flex-grow屬性值:

如果flex-grow值大于1，則獨占所有剩余空間。

如果flex-grow值小于1，則擴展空間就等于總剩余空間乘以flex-grow值。

請點擊demo查看效果

如果給多個子項設置flex-grow屬性值:

如果flex-grow值總和大于1，則擴展空間被完全利用，空間按子項的flex-grow值的比例分配，例如子項flex-grow比例1：2：1，那么中間子項的空間是左右子項的一倍。

如果flex-grow值的總和小于1，則每個子項擴展的空間就等于總剩余空間乘以當前子項flex-grow值。

請點擊demo查看效果

3. flex-shrink

flex-shrink屬性用來控制子項當容器空間不足，子項的收縮比例。

語法：

flex-shrink: <number>; /* 數值，默認值是 1 */ 復制代碼

flex-shrink不支持負數，默認值是1，所有子項都會收縮。如果為0，則不收縮，表現為適應寬度。

flex-shrink和flex-grow比較類似，flex-shrink是容器不足時如果收縮空間，flex-grow是容器充足如何利用空間。規則也類似：

如果只設置了一個子項的flex-shrink屬性值:

如果flex-shrink值大于等于1，則完全收縮，填滿容器。

如果flex-shrink值小于1，則不完全收縮，溢出容器。

如果給多個子項設置flex-shrink屬性值:

如果flex-shrink值總和大于1，則收縮完全，每個子項收縮尺寸的比例和flex-shrink值的比例一樣。

flex-shrink值的總和小于1，則不完全收縮，每個子項的收縮尺寸就是flex-shrink的值。

請點擊demo查看效果

4. flex-basis

flex-basis屬性用來描述子項默認空間大小。

flex-basis: <length> | auto; /* 默認值是 auto */ 復制代碼

flex-basis默認值是auto，有設置width空間就是width，沒有就按內容寬度來。

請點擊demo查看效果

5. flex

flex屬性是flex-grow，flex-shrink和flex-basis的縮寫。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 復制代碼

其中第2個（flex-shrink）和第3個(flex-basis)參數是可選的。

• 默認值為0 1 auto。
• flex:none取值為0 0 auto。
• flex:auto取值為1 1 auto。

一個參數

• 一個無單位數(<number>): 它會被當作flex-grow的值。
• 一個有效的寬度(width)值: 它會被當作flex-basis的值。
• 關鍵字none，auto或initial。

二個參數

• 第一個值必須為一個無單位數，并且它會被當作flex-grow的值。
• 第二個值一個無單位數：它會被當作flex-shrink的值。
• 第二個值一個有效的寬度值: 它會被當作flex-basis的值。

三個參數

• 第一個值必須為一個無單位數，并且它會被當作flex-grow的值。
• 第二個值必須為一個無單位數，并且它會被當作flex-shrink的值。
• 第三個值必須為一個有效的寬度值， 并且它會被當作flex-basis的值。

請點擊demo查看效果

6. align-self

align-self屬性用于控制子項的垂直對其方式。

語法：

align-self: auto | stretch | flex-start | flex-end | center | baseline; 復制代碼

align-self默認值auto會繼承容器align-items的屬性值。屬性值的效果與之前介紹的作用一樣，這里不再重復說明。

請點擊demo查看效果

其他

• 對子項設置float,clear,vertical-align屬性沒有任何作用。
• 大部分的規范都在mdn官方文檔有詳細的描述，本文更重API的使用和日常開發。

參考文章

• A Complete Guide to Flexbox
• CSS 彈性盒子
• flex布局教程

轉載于:https://juejin.im/post/5d2eda74f265da1b5f268ac1

總結

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

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