前端入門5-CSS彈性佈局flex

摘要： 宣告 本系列文章內容全部梳理自以下四個來源： 《HTML5權威指南》 《JavaScript權威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過...

宣告

本系列文章內容全部梳理自以下四個來源：

• 《HTML5權威指南》
• 《JavaScript權威指南》
• ofollow,noindex" target="_blank">MDN web docs
• Github:smyhvae/web

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

正文-彈性佈局flex

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

可以這麼的理解，傳統的網頁佈局方式是通過 display 和 position 以及 float 三者完成的，藉助塊級元素，行內元素特性，結合 position 指定的相對佈局、絕對佈局、固定佈局方式來實現各種排版效果。如果需要浮動，則藉助 float。

但這種傳統的方式，一來使用較複雜，二來某些排版效果不好實現，如列表、居中、響應式佈局等效果。

而 flex 則能夠很好的完成傳統的佈局工作，而且，它還可以支援響應式佈局。

1.基礎概念

兩根軸線

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

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

佈局空白

佈局空白：available space，大概來說，flex 容器大小扣掉 items 的 flex-basis 指定的佔據的空間大小之外剩餘的區域，flex-basis 通常是指 item 本身的大小，當然也可以手動設定。

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

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

具體屬性不瞭解沒關係，下面的章節會講，知道概念即可。

2.flex相關屬性

對任意塊級元素標籤設定 display: flex 即可讓這個元素作為 flex 容器存在，也就可以使用 flex 的相關屬性了。

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

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

flex-direction

語法格式：

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

用於設定主軸的方向，flex 分主軸和交叉軸兩個概念，items 佈局時，預設延主軸方向進行，因此通過設定主軸是水平方向還是垂直方向就可以實現 items 的水平或垂直佈局。

• row：預設值，設定主軸為水平方向
• column：設定主軸為垂直方向

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

示例：

flex-wrap

語法格式：

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

用於設定是否允許換行，預設值 nowrap。

當設定了 wrap 時，允許 items 在主軸方向溢位時自動進行換行佈局，這點可以很好的用來實現響應式佈局，比如當空間逐漸縮小時，原本水平排列的控制元件換成垂直方向排版。

示例：

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) | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
where 
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

用於設定 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 的情況，預設都以 LTR 為主）：

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

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

示例：

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

align-items

語法格式：

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

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

看看屬性值：

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

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

示例：

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

stretch 要能夠生效，需要在 items 在交叉軸方向的不設定大小，如上圖中主軸是水平方向，那麼 items 需要不設定 height，此時 stretch 才能夠讓 items 拉伸佔據交叉軸的高度。

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

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

align-content

語法格式：

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

當 flex 容器的 items 設定了溢位換行屬性，且當前在交叉軸方向上存在多行 item 的情況下，該屬性才會生效。

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

當需要進行 start, center, end 這些排版時，是將這些多行的 items 都看成一個整體，然後進行交叉軸方向上的排版控制。此時，將多行 item 看成一行之後，那麼這個 align-content 之後的排版佈局就跟 align-items 一樣的效果了。

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

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

(ps：flex 容器設定了 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'> = [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

用於設定 items 在主軸方向的大小，如果主軸是水平方向，相當於設定 width，此時，該屬性值會覆蓋掉 width 設定的大小。

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

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

flex-grow

語法格式：

flex-grow: <number>

用於設定 item 在主軸方向上的拉伸因子，即如果 flex 容器還有剩餘空間，會按照各 item 設定的拉伸因子比例關係分配。預設值為 0，即不拉伸。

作用很像 Andorid 中的 LinearLayout 的 child 裡設定了 layout_weight 用途一樣。

示例：

flex-shrink

語法格式：

flex-shrink: <number>

用於設定 item 在主軸方向上的收縮因子，跟 flex-grow 剛好反著來。當 flex 容器空間不夠，item 要溢位時，設定次屬性可控制 item 按比例進行相應收縮，以便不讓 item 溢位，預設 1，值越大收縮倍數越大，最後 item 就越小，0 表示不收縮，負值無效。

另外，如果設定了換行屬性，那麼這個就無效了。換行和收縮都是用於解決 item 在主軸方向上溢位的問題，既然是互斥，且換行優先順序高，那麼設定了換行，就不會再對 item 進行收縮了。

示例：

flex

語法格式：

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

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

flex: 0 0 auto
flex: 1 1 auto
flex: 0 1 auto

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

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

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

雙值語法: 第一個值必須為一個無單位數，並且它會被當作 <flex-grow>的值。第二個值必須為以下之一：

<flex-shrink>的值。
<flex-basis>的值。

三值語法:

<flex-grow>的值。
<flex-shrink>的值。
<flex-basis>的值。

align-self

語法格式：

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

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

這樣就可以實現控制交叉軸上的每個 item 的不同佈局方式，如下：

order

語法格式：

order: <integer>

用於控制 items 的排版順序，item 將按照 order 屬性值的增序進行佈局。擁有相同 order 屬性值的元素按照它們在原始碼中出現的順序進行佈局。預設值為 0，可設定負值，排序將在預設不設定的 item 前面。

示例：

小結

我覺得，這些屬性大體記得每個屬性的主要用途即可，至於每個屬性值如何設定，如何相互結合使用可以達到什麼樣的效果，寫程式碼的時候再調就是了。

3.應用場景

以下場景中，如沒有特別指明，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;
}

長這個樣子：

白色區域是 flex 容器，黑色圓圈是 item。

場景1:

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

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

場景2：

前後有固定大小 item，中間區域自動拉伸佔據可用空間。

<style >
.flex
{
display: flex;/* 宣告這個元素作為 flex 容器 */
flex-direction: row;/*主軸為水平方向*/
}
</style>

<div class="flex">
<div class="dot" >1</div>
<div class="dot" style="flex-grow: 1">2</div>
<div class="dot" >3</div>
</div>

場景3：

響應式佈局，在螢幕尺寸允許的情況下呈水平佈局，但是在螢幕不允許的情況下可以水平摺疊。

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

場景4：

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

這個需要結合塊級元素的 margin 屬性使用，當設定 margin: auto 時表示，將盡可能佔據足夠多的空間。

<style >
.flex
{
display: flex;/* 宣告這個元素作為 flex 容器 */
flex-direction: row;/*主軸為水平方向*/
}
</style>

<div class="flex">
<div class="dot" >1</div>
<div class="dot" >2</div>
<div class="dot" margin-left="auto">3</div>
</div>