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

彈性盒子

給div等塊級(jí)元素設(shè)置display:flex或span等內(nèi)聯(lián)元素設(shè)置display:inline-flex，彈性盒子flex布局就生成了。這里借用官網(wǎng)說明：

1. 彈性容器(Flex container)

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

2. 彈性項(xiàng)目(Flex item)

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

3. 軸(Axis)

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

• flex-direction 確立主軸。
• justify-content 定義了在當(dāng)前行上，彈性項(xiàng)目沿主軸如何排布。
• align-items 定義了在當(dāng)前行上，彈性項(xiàng)目沿側(cè)軸默認(rèn)如何排布。
• align-self 定義了單個(gè)彈性項(xiàng)目在側(cè)軸上應(yīng)當(dāng)如何對(duì)齊，這個(gè)定義會(huì)覆蓋由 align-items 所確立的默認(rèn)值。

4. 方向(Direction)

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

• order 屬性將元素與序號(hào)關(guān)聯(lián)起來，以此決定哪些元素先出現(xiàn)。
• flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的簡(jiǎn)寫，決定彈性項(xiàng)目如何排布。

5. 行(Line)

根據(jù) flex-wrap 屬性，彈性項(xiàng)目可以排布在單個(gè)行或者多個(gè)行中。此屬性控制側(cè)軸的方向和新行排列的方向。

6. 尺寸(Dimension)

根據(jù)彈性容器的主軸與側(cè)軸，彈性項(xiàng)目的寬和高中，對(duì)應(yīng)主軸的稱為主軸尺寸(main size) ，對(duì)應(yīng)側(cè)軸的稱為 側(cè)軸尺寸(cross size)。

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

索引屬性

這些屬性都是控制flex子項(xiàng)的表現(xiàn)，只不過容器屬性控制整體，子項(xiàng)屬性控制個(gè)體。

flex容器屬性flex子項(xiàng)屬性

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用來控制整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。

語(yǔ)法：

flex-direction: row | row-reverse | column | column-reverse; 復(fù)制代碼

row

默認(rèn)值，默認(rèn)是當(dāng)前水平文檔流方向即從左到右排列。（受direction影響）

row-reverse

方向與row相反。

column

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

column-reverse

方向與column相反。

請(qǐng)點(diǎn)擊demo查看效果

2. flex-wrap

flex-wrap用來控制子項(xiàng)整體單行顯示還是換行顯示。

語(yǔ)法：

flex-wrap: nowrap | wrap | wrap-reverse; 復(fù)制代碼

nowrap

默認(rèn)值，表示單行顯示，不換行。

wrap

寬度不足換行顯示。

wrap-reverse

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

請(qǐng)點(diǎn)擊demo查看效果

3. flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

語(yǔ)法：

flex-flow: <'flex-direction'> || <'flex-wrap'> 復(fù)制代碼

給容器設(shè)置如下樣式：

.flex{flex-flow: row-reverse wrap-reverse; } 復(fù)制代碼

4. justify-content

justify-content用來控制子項(xiàng)整體的對(duì)齊和分布方式。

語(yǔ)法：

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

flex-start

默認(rèn)值，默認(rèn)表現(xiàn)為左對(duì)齊。

flex-end

默認(rèn)表現(xiàn)為右對(duì)齊。

center

表現(xiàn)居中對(duì)齊。

space-between

表現(xiàn)為兩端對(duì)齊。

space-around

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

space-evenly

表現(xiàn)為每個(gè)子項(xiàng)均勻分布，子項(xiàng)兩側(cè)空白間距完全相等。視覺上兩個(gè)子項(xiàng)之間的間距（以及到邊緣的空間）相等。

請(qǐng)點(diǎn)擊demo查看效果

5. align-items

align-items用來控制子項(xiàng)整體相對(duì)于容器的垂直對(duì)齊方式。

語(yǔ)法：

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

stretch

默認(rèn)值。子項(xiàng)高度拉伸整個(gè)容器，如果子項(xiàng)設(shè)置了高度值，則按照設(shè)置的高度值渲染。

flex-start

表現(xiàn)為容器頂部對(duì)齊。

flex-end

表現(xiàn)為容器底部對(duì)齊。

center

表現(xiàn)為垂直居中對(duì)齊。

baseline

表現(xiàn)為子項(xiàng)都相對(duì)于容器的基線（字母x的下邊緣）對(duì)齊。

請(qǐng)點(diǎn)擊demo查看效果

6. align-content

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

語(yǔ)法：

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

stretch

默認(rèn)值。每一行子項(xiàng)都等比例拉伸鋪滿整個(gè)容器。

flex-start

表現(xiàn)為頂部堆疊。

flex-end

表現(xiàn)為底部堆疊。

center

表現(xiàn)為子項(xiàng)整體垂直居中對(duì)齊。

space-between

表現(xiàn)為上下兩行兩端對(duì)齊。

space-around

表現(xiàn)與justify-content的space-around一致，方向?yàn)榇怪狈较蚨选?/p>

space-evenly

表現(xiàn)與justify-content的space-evenly一致，方向?yàn)榇怪狈较蚨选?/p>

請(qǐng)點(diǎn)擊demo查看效果

flex子項(xiàng)屬性

1. order

order屬性用來控制子項(xiàng)在布局時(shí)的順序。子項(xiàng)元素按照order屬性的值的增序進(jìn)行排列。

語(yǔ)法：

order: <integer>; /* 整數(shù)值，默認(rèn)為0 */ 復(fù)制代碼

請(qǐng)點(diǎn)擊demo查看效果

2. flex-grow

flex-grow屬性用于放大子項(xiàng)的空間占用比例。

語(yǔ)法：

flex-grow: <number>; /* 數(shù)值，可以是小數(shù)，默認(rèn)0 */ 復(fù)制代碼

flex-grow不支持負(fù)數(shù)，默認(rèn)值是0。當(dāng)flex-grow大于0，則分配規(guī)則如下：

所有剩余空間大小為1。

如果只設(shè)置了一個(gè)子項(xiàng)的flex-grow屬性值:

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

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

請(qǐng)點(diǎn)擊demo查看效果

如果給多個(gè)子項(xiàng)設(shè)置flex-grow屬性值:

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

如果flex-grow值的總和小于1，則每個(gè)子項(xiàng)擴(kuò)展的空間就等于總剩余空間乘以當(dāng)前子項(xiàng)flex-grow值。

請(qǐng)點(diǎn)擊demo查看效果

3. flex-shrink

flex-shrink屬性用來控制子項(xiàng)當(dāng)容器空間不足，子項(xiàng)的收縮比例。

語(yǔ)法：

flex-shrink: <number>; /* 數(shù)值，默認(rèn)值是 1 */ 復(fù)制代碼

flex-shrink不支持負(fù)數(shù)，默認(rèn)值是1，所有子項(xiàng)都會(huì)收縮。如果為0，則不收縮，表現(xiàn)為適應(yīng)寬度。

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

如果只設(shè)置了一個(gè)子項(xiàng)的flex-shrink屬性值:

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

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

如果給多個(gè)子項(xiàng)設(shè)置flex-shrink屬性值:

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

flex-shrink值的總和小于1，則不完全收縮，每個(gè)子項(xiàng)的收縮尺寸就是flex-shrink的值。

請(qǐng)點(diǎn)擊demo查看效果

4. flex-basis

flex-basis屬性用來描述子項(xiàng)默認(rèn)空間大小。

flex-basis: <length> | auto; /* 默認(rèn)值是 auto */ 復(fù)制代碼

flex-basis默認(rèn)值是auto，有設(shè)置width空間就是width，沒有就按內(nèi)容寬度來。

請(qǐng)點(diǎn)擊demo查看效果

5. flex

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

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

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

• 默認(rèn)值為0 1 auto。
• flex:none取值為0 0 auto。
• flex:auto取值為1 1 auto。

一個(gè)參數(shù)

• 一個(gè)無單位數(shù)(<number>): 它會(huì)被當(dāng)作flex-grow的值。
• 一個(gè)有效的寬度(width)值: 它會(huì)被當(dāng)作flex-basis的值。
• 關(guān)鍵字none，auto或initial。

二個(gè)參數(shù)

• 第一個(gè)值必須為一個(gè)無單位數(shù)，并且它會(huì)被當(dāng)作flex-grow的值。
• 第二個(gè)值一個(gè)無單位數(shù)：它會(huì)被當(dāng)作flex-shrink的值。
• 第二個(gè)值一個(gè)有效的寬度值: 它會(huì)被當(dāng)作flex-basis的值。

三個(gè)參數(shù)

• 第一個(gè)值必須為一個(gè)無單位數(shù)，并且它會(huì)被當(dāng)作flex-grow的值。
• 第二個(gè)值必須為一個(gè)無單位數(shù)，并且它會(huì)被當(dāng)作flex-shrink的值。
• 第三個(gè)值必須為一個(gè)有效的寬度值， 并且它會(huì)被當(dāng)作flex-basis的值。

請(qǐng)點(diǎn)擊demo查看效果

6. align-self

align-self屬性用于控制子項(xiàng)的垂直對(duì)其方式。

語(yǔ)法：

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

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

請(qǐng)點(diǎn)擊demo查看效果

其他

• 對(duì)子項(xiàng)設(shè)置float,clear,vertical-align屬性沒有任何作用。
• 大部分的規(guī)范都在mdn官方文檔有詳細(xì)的描述，本文更重API的使用和日常開發(fā)。

參考文章

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

轉(zhuǎn)載于:https://juejin.im/post/5d2eda74f265da1b5f268ac1

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。