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

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

聲明

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

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

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

正文-彈性布局flex

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

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

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

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

1.基礎(chǔ)概念

兩根軸線

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

理解主軸和交叉軸的概念對(duì)于對(duì)齊 flexbox 里面的元素是很重要的；因?yàn)?flexbox 的特性是沿著主軸或者交叉軸對(duì)齊之中的元素。

布局空白

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

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

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

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

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

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

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

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

flex-direction

語法格式：

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

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

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

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

示例：

flex-wrap

語法格式：

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

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

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

示例：

flex-flow

語法格式：

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

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

如果你不想多帶帶使用上述兩個(gè)屬性，可以將它們一起在 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 在主軸方向上的對(duì)齊方式，可以靠左，靠右，居中或者按比例均分等效果。

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

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

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

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

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

剩余的屬性值不介紹了，因?yàn)槲乙策€沒有搞懂它們的含義和應(yīng)用場(chǎ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 是能控制主軸上的排版，而這個(gè)屬性則是用于控制交叉軸，通常兩個(gè)都會(huì)一起使用，相互結(jié)合，可以達(dá)到一些類似頁面居中效果。

看看屬性值：

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

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

示例：

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

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

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

如果是想實(shí)現(xiàn)多行的 items 都作為一個(gè)整體居中，那么用 align-items 就無法實(shí)現(xiàn)了，針對(duì)這種有多行的情況，需要用另外一個(gè)屬性來控制：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 的情況下，該屬性才會(huì)生效。

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

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

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

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

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

place-content

語法格式：

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

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

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

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

作用于 flex-item 彈性盒子的子項(xiàng)身上的屬性：

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，此時(shí)，該屬性值會(huì)覆蓋掉 width 設(shè)置的大小。

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

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

flex-grow

語法格式：

flex-grow: 

用于設(shè)置 item 在主軸方向上的拉伸因子，即如果 flex 容器還有剩余空間，會(huì)按照各 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í)，設(shè)置次屬性可控制 item 按比例進(jìn)行相應(yīng)收縮，以便不讓 item 溢出，默認(rèn) 1，值越大收縮倍數(shù)越大，最后 item 就越小，0 表示不收縮，負(fù)值無效。

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

示例：

flex

語法格式：

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

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

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

flex 屬性可以指定 1 個(gè)，2 個(gè)或 3 個(gè)值。

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

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

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

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

三值語法:

• 第一個(gè)值必須為一個(gè)無單位數(shù)，并且它會(huì)被當(dāng)作的值。
• 第二個(gè)值必須為一個(gè)無單位數(shù)，并且它會(huì)被當(dāng)作 的值。
• 第三個(gè)值必須為一個(gè)有效的寬度值， 并且它會(huì)被當(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

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

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

order

語法格式：

order: 

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

示例：

小結(jié)

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

3.應(yīng)用場(chǎng)景

以下場(chǎ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;
}

長這個(gè)樣子：

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

場(chǎng)景1:

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

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

場(chǎng)景2：

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

    
1
    
2
    
3

場(chǎng)景3：

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

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

場(chǎng)景4：

水平排列的一組 item 中，前幾個(gè)左對(duì)齊，后幾個(gè)右對(duì)齊。

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

    
1
    
2
    
3

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