摘要：總之有了基礎(chǔ)，理解彈性布局蠻容易的。語法格式當(dāng)容器的設(shè)置了溢出換行屬性，且當(dāng)前在交叉軸方向上存在多行的情況下，該屬性才會生效。

本篇文章已授權(quán)微信公眾號 dasu_Android（大蘇）獨家發(fā)布

聲明

本系列文章內(nèi)容全部梳理自以下四個來源：

• 《HTML5權(quán)威指南》
• 《JavaScript權(quán)威指南》
• MDN web docs
• Github:smyhvae/web

作為一個前端小白，入門跟著這四個來源學(xué)習(xí)，感謝作者的分享，在其基礎(chǔ)上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理解是錯誤的，如有發(fā)現(xiàn)，歡迎指點下。

正文-彈性布局flex

彈性布局的作用有點兒類似 Android 中 LinearLayout 和 RelativeLayout 兩者的合成版，即：支持橫向布局，縱向布局，start，end，center 布局，寬高按比例瓜分等等，當(dāng)然它還有很多其他功能，比如自動換行，按指定 order 排列等。總之有了 Android 基礎(chǔ)，理解彈性布局 flex 蠻容易的。

可以這么的理解，傳統(tǒng)的網(wǎng)頁布局方式是通過 display 和 position 以及 float 三者完成的，借助塊級元素，行內(nèi)元素特性，結(jié)合 position 指定的相對布局、絕對布局、固定布局方式來實現(xiàn)各種排版效果。如果需要浮動，則借助 float。

但這種傳統(tǒng)的方式，一來使用較復(fù)雜，二來某些排版效果不好實現(xiàn)，如列表、居中、響應(yīng)式布局等效果。

而 flex 則能夠很好的完成傳統(tǒng)的布局工作，而且，它還可以支持響應(yīng)式布局。

1.基礎(chǔ)概念

兩根軸線

當(dāng)使用 flex 布局時，首先想到的是兩根軸線：主軸和交叉軸。主軸由?flex-direction?定義，另一根軸垂直于它。我們使用 flexbox 的所有屬性都跟這兩根軸線有關(guān), 所以有必要在一開始首先理解它。

理解主軸和交叉軸的概念對于對齊 flexbox 里面的元素是很重要的；因為 flexbox 的特性是沿著主軸或者交叉軸對齊之中的元素。

布局空白

布局空白：available space，大概來說，flex 容器大小扣掉 items 的 flex-basis 指定的占據(jù)的空間大小之外剩余的區(qū)域，flex-basis 通常是指 item 本身的大小，當(dāng)然也可以手動設(shè)置。

flex 的一些屬性就是通過改變 flex 容器中的布局空白分配來達(dá)到對齊等效果的。

比如 items 的 flex-grow 拉伸或者 flex 容器的 justify-content 主軸對齊等，其實就是將這些布局空白按照不同算法分配給各個 item，分給 item 時，是要直接填充進(jìn) item 的內(nèi)容里達(dá)到拉伸效果，還是就簡單的將空白圍繞在 item 周圍達(dá)到類似 margin 效果來實現(xiàn) item 的居中、靠左、靠右、均分等對齊方式。

具體屬性不了解沒關(guān)系，下面的章節(jié)會講，知道概念即可。

2.flex相關(guān)屬性

對任意塊級元素標(biāo)簽設(shè)置 display: flex 即可讓這個元素作為 flex 容器存在，也就可以使用 flex 的相關(guān)屬性了。

flex 的屬性并不多，目前只有 13 個，其中有 7 個是 flex 彈性盒子容器本身所使用的屬性，6 個是 flex-item 彈性盒子的子項使用的屬性。其中，有些屬性只是將其他屬性的集中簡化使用，因此，真正具有布局用途的屬性并不多，很好掌握。

作用于 flex 彈性盒子容器身上的屬性：

flex-direction

語法格式：

flex-direction: row(default) | row-reverse | column | column-reverse

用于設(shè)置主軸的方向，flex 分主軸和交叉軸兩個概念，items 布局時，默認(rèn)延主軸方向進(jìn)行，因此通過設(shè)置主軸是水平方向還是垂直方向就可以實現(xiàn) items 的水平或垂直布局。

• row：默認(rèn)值，設(shè)置主軸為水平方向
• column：設(shè)置主軸為垂直方向

其他屬性就不介紹了，因為主軸方向就兩個，要么水平，要么垂直，其他的區(qū)別僅在于水平時是從左到右，還是從右到左，所以這個屬性的影響因素之一的 LTR 和 RTL，但沒必要考慮這么多，這些場景應(yīng)該不多，知道這個是用來設(shè)置主軸方向就夠了，我覺得。

示例：

flex-wrap

語法格式：

flex-wrap: nowrap(default) | wrap | wrap-reverse

用于設(shè)置是否允許換行，默認(rèn)值 nowrap。

當(dāng)設(shè)置了 wrap 時，允許 items 在主軸方向溢出時自動進(jìn)行換行布局，這點可以很好的用來實現(xiàn)響應(yīng)式布局，比如當(dāng)空間逐漸縮小時，原本水平排列的控件換成垂直方向排版。

示例：

flex-flow

語法格式：

flex-flow: <"flex-direction"> || <"flex-wrap">

這個屬性并沒有另外的含義，它只是 flex-direction 和 flex-wrap 的簡寫用法而已。

如果你不想多帶帶使用上述兩個屬性，可以將它們一起在 flex-flow 使用，如：

flex-flow: row wrap
//等效于
flex-direction: row;
flex-wrap: wrap;

justify-content

語法格式：

justify-content: normal(default) |  | ? [  | left | right ]
where 
 = space-between | space-around | space-evenly | stretch
 = unsafe | safe
 = center | start | end | flex-start | flex-end

用于設(shè)置 items 在主軸方向上的對齊方式，可以靠左，靠右，居中或者按比例均分等效果。

需要先明確一點概念，對齊是指 items 在 flex 容器中的排版對齊方式，那么要想 flex 容器可以控制 items 的對齊方式，那主軸方向上自然就還需要有布局空白，如果都沒有布局空白了，不就表明 items 已充滿 flex 容器了，那談何對齊。

那么，如果存在至少一個 item，它的?flex-grow?屬性不等于 0，justify-content 這個屬性就失效了，因為 flex-grow 表示允許 item 按照比例瓜分布局空白，這樣一來布局空白被瓜分完了，flex 容器在主軸方向上已被 items 充滿， 也就沒有對齊一說了。

所以要能夠正確的使用該屬性來控制 items 在主軸方向的對齊方式，那么就需要注意 item 中會影響布局空白的屬性，如 flex-grow，flex-basis 這些的使用。

下面看看各屬性值介紹（下面的介紹不考慮 RTL 的情況，默認(rèn)都以 LTR 為主）：

• start：主軸是水平方向的話，左對齊方式排版；主軸是垂直方向的話，上對齊方式排版；
• end：主軸是水平方向的話，右對齊方式排版；主軸是垂直方向的話，下對齊方式排版；
• center：居中方式排版；
• space-between：等比例瓜分布局空白，每行首元素對齊，末元素對齊，每行各元素間距一致；
• space-around：與上述的類似效果，區(qū)別僅在于，每行首元素并不是在 flex 容器內(nèi)容區(qū)域左邊就開始布局，它距離 flex 容器左邊的距離等于各個元素之間間距的一半。說白點，就是行首元素和末尾元素的周邊有類型 margin 值存在。

剩余的屬性值不介紹了，因為我也還沒有搞懂它們的含義和應(yīng)用場景。

示例：

(ps：flex 容器設(shè)置了 padding，所以 start 和 end 才沒有貼靠邊界 )

align-items

語法格式：

align-items: normal | stretch |  | [ ?  ]
where 
 = [ first | last ]? baseline
 = unsafe | safe
 = center | start | end | self-start | self-end | flex-start | flex-end

用于控制 items 在交叉軸方向上的排版布局方式，justify-content 是能控制主軸上的排版，而這個屬性則是用于控制交叉軸，通常兩個都會一起使用，相互結(jié)合，可以達(dá)到一些類似頁面居中效果。

看看屬性值：

• flex-start：交叉軸方向，從起點開始布局排版
• flex-end：交叉軸方向，從末尾開始布局排版
• center：交叉軸方向，從中間開始布局排版
• stretch：交叉軸方向，如果 items 在交叉軸方向沒有設(shè)置大小，那么讓 items 在交叉軸的方向充滿 flex 容器的高度。

其他屬性不介紹了，不熟悉。

示例：

(ps：flex 容器設(shè)置了 padding，所以 start 和 end 才沒有貼靠邊界 )

stretch 要能夠生效，需要在 items 在交叉軸方向的不設(shè)置大小，如上圖中主軸是水平方向，那么 items 需要不設(shè)置 height，此時 stretch 才能夠讓 items 拉伸占據(jù)交叉軸的高度。

有一點需要注意，當(dāng) flex 容器的 items 在主軸方向上只有一行時，可以很明確的使用這個屬性來控制在交叉軸的排版方式。但，如果 items 在主軸上超過一行，那么最終的效果可能就不是想要的了，比如下圖：

如果是想實現(xiàn)多行的 items 都作為一個整體居中，那么用 align-items 就無法實現(xiàn)了，針對這種有多行的情況，需要用另外一個屬性來控制：align-content。

align-content

語法格式：

align-content: normal |  |  | ? 
where 
 = [ first | last ]? baseline
 = space-between | space-around | space-evenly | stretch
 = unsafe | safe
 = center | start | end | flex-start | flex-end

當(dāng) flex 容器的 items 設(shè)置了溢出換行屬性，且當(dāng)前在交叉軸方向上存在多行 item 的情況下，該屬性才會生效。

網(wǎng)上有種翻譯，說這個屬性是用于軸對齊，我不是很理解，我自己粗俗的分兩種情況理解：

當(dāng)需要進(jìn)行 start, center, end 這些排版時，是將這些多行的 items 都看成一個整體，然后進(jìn)行交叉軸方向上的排版控制。此時，將多行 item 看成一行之后，那么這個 align-content 之后的排版布局就跟 align-items 一樣的效果了。

其他的 space-around，space-between 究竟是如何計算排版的，不熟悉。

屬性值含義不看了，跟 align-items 一樣的效果，直接看示例：

(ps：flex 容器設(shè)置了 padding，所以 start 和 end 才沒有貼靠邊界 )

place-content

語法格式：

place-content: <"align-content"> <"justify-content">?

這個屬性并沒有另外的含義，它只是 align-content 和 justify-content 的簡寫用法而已。

如果你不想多帶帶使用上述兩個屬性，可以將它們一起在 place-content 使用，如：

place-content: center center
//等效于
align-content: center;
justify-content: center;

作用于 flex-item 彈性盒子的子項身上的屬性：

flex-basis

語法格式：

flex-basis: content | <"width">

where 
<"width"> = [  |  ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

用于設(shè)置 items 在主軸方向的大小，如果主軸是水平方向，相當(dāng)于設(shè)置 width，此時，該屬性值會覆蓋掉 width 設(shè)置的大小。

嘗試了下，在 chorme 瀏覽器上 content 屬性不生效，不清楚，可能不同瀏覽器行為還不一樣，既然這樣，就先暫時不深入了解這個屬性了，大概知道用于設(shè)置主軸方向上的 item 大小即可。

就算要使用，先直接用指定數(shù)值大小的方式好了。

flex-grow

語法格式：

flex-grow: 

用于設(shè)置 item 在主軸方向上的拉伸因子，即如果 flex 容器還有剩余空間，會按照各 item 設(shè)置的拉伸因子比例關(guān)系分配。默認(rèn)值為 0，即不拉伸。

作用很像 Andorid 中的 LinearLayout 的 child 里設(shè)置了 layout_weight 用途一樣。

示例：

flex-shrink

語法格式：

flex-shrink: 

用于設(shè)置 item 在主軸方向上的收縮因子，跟 flex-grow 剛好反著來。當(dāng) flex 容器空間不夠，item 要溢出時，設(shè)置次屬性可控制 item 按比例進(jìn)行相應(yīng)收縮，以便不讓 item 溢出，默認(rèn) 1，值越大收縮倍數(shù)越大，最后 item 就越小，0 表示不收縮，負(fù)值無效。

另外，如果設(shè)置了換行屬性，那么這個就無效了。換行和收縮都是用于解決 item 在主軸方向上溢出的問題，既然是互斥，且換行優(yōu)先級高，那么設(shè)置了換行，就不會再對 item 進(jìn)行收縮了。

示例：

flex

語法格式：

flex: none | auto | initial | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

這屬性是 flex-grow，flex-shrink，flex-basis 三個屬性的簡化使用，有三種屬性值：

• none：元素會根據(jù)自身寬高來設(shè)置尺寸。它是完全非彈性的：既不會縮短，也不會伸長來適應(yīng)flex容器。相當(dāng)于將屬性設(shè)置為 flex: 0 0 auto。
• auto：元素會根據(jù)自身的寬度與高度來確定尺寸，但是會自行伸長以吸收flex容器中額外的自由空間，也會縮短至自身最小尺寸以適應(yīng)容器。這相當(dāng)于將屬性設(shè)置為 flex: 1 1 auto.
• initial：屬性默認(rèn)值，?元素會根據(jù)自身寬高設(shè)置尺寸。它會縮短自身以適應(yīng)容器，但不會伸長并吸收flex容器中的額外自由空間來適應(yīng)容器?。相當(dāng)于將屬性設(shè)置為"flex: 0 1 auto"。

flex 屬性可以指定 1 個，2 個或 3 個值。

單值語法: 值必須為以下其中之一:

• 一個無單位數(shù)(): 它會被當(dāng)作 的值。
• 一個有效的寬度(width)值: 它會被當(dāng)作 的值。
• 關(guān)鍵字 none, auto,或initial.

雙值語法: 第一個值必須為一個無單位數(shù)，并且它會被當(dāng)作的值。第二個值必須為以下之一：

• 一個無單位數(shù)：它會被當(dāng)作的值。
• 一個有效的寬度值: 它會被當(dāng)作的值。

三值語法:

• 第一個值必須為一個無單位數(shù)，并且它會被當(dāng)作的值。
• 第二個值必須為一個無單位數(shù)，并且它會被當(dāng)作 的值。
• 第三個值必須為一個有效的寬度值， 并且它會被當(dāng)作的值。

align-self

語法格式：

align-self: auto | normal | stretch |  | ? 
where 
 = [ first | last ]? baseline
 = unsafe | safe
 = center | start | end | self-start | self-end | flex-start | flex-end

用于給單個 item 設(shè)置交叉軸方向上的排版布局方式，屬性值和作用跟 align-items 一樣，區(qū)別僅在于 align-items 是 flex 容器的屬性，它會作用于所有的 items 上；而 align-self 允許對單個 item 設(shè)置，該值會覆蓋 align-items 設(shè)置的屬性值。

這樣就可以實現(xiàn)控制交叉軸上的每個 item 的不同布局方式，如下：

order

語法格式：

order: 

用于控制 items 的排版順序，item 將按照?order?屬性值的增序進(jìn)行布局。擁有相同?order?屬性值的元素按照它們在源代碼中出現(xiàn)的順序進(jìn)行布局。默認(rèn)值為 0，可設(shè)置負(fù)值，排序?qū)⒃谀J(rèn)不設(shè)置的 item 前面。

示例：

小結(jié)

我覺得，這些屬性大體記得每個屬性的主要用途即可，至于每個屬性值如何設(shè)置，如何相互結(jié)合使用可以達(dá)到什么樣的效果，寫代碼的時候再調(diào)就是了。

3.應(yīng)用場景

以下場景中，如沒有特別指明，flex 容器基本樣式和 item 基本樣式如下：

.flex
{
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background-color: #FFFFFF;
}

.dot {
    width: 50px;
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    color: #FFFFFF;
    height: 50px;
    border-radius: 25px;
    background-color: black;
}

長這個樣子：

白色區(qū)域是 flex 容器，黑色圓圈是 item。

場景1:

在頁面中把一個元素居中：item 水平、垂直方向都居中

.flex
{
    display: flex;/* 聲明這個元素作為 flex 容器 */
    flex-direction: row;/*主軸為水平方向*/
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}

場景2：

前后有固定大小 item，中間區(qū)域自動拉伸占據(jù)可用空間。

    
1
    
2
    
3

場景3：

響應(yīng)式布局，在屏幕尺寸允許的情況下呈水平布局，但是在屏幕不允許的情況下可以水平折疊。

.flex
{
    display: flex;/* 聲明這個元素作為 flex 容器 */
    flex-direction: row;/*主軸為水平方向*/
    flex-wrap: wrap;/*溢出時換行*/
}

場景4：

水平排列的一組 item 中，前幾個左對齊，后幾個右對齊。

這個需要結(jié)合塊級元素的 margin 屬性使用，當(dāng)設(shè)置 margin: auto 時表示，將盡可能占據(jù)足夠多的空間。

    
1
    
2
    
3

大家好，我是 dasu，歡迎關(guān)注我的公眾號（dasuAndroidTv），如果你覺得本篇內(nèi)容有幫助到你，可以轉(zhuǎn)載但記得要關(guān)注，要標(biāo)明原文哦，謝謝支持~