前言

Flex想必大家都很熟悉，也是大家平時(shí)在進(jìn)行頁面布局的首選方案。(反正我是!)。不知道大家平時(shí)在遇到Flex布局屬性問題時(shí)，是如何查閱并解決的。反正，我每次記不住哪些屬性或者對(duì)哪些屬性的用法忘記時(shí)。我總是求助于阮一峰老師寫的Flex 布局教程：語法篇[1]。

其實(shí)，對(duì)于CSS來講，大家都抱著一種「死記硬背」的東西來對(duì)待它。久而久之，就會(huì)出現(xiàn)上述我說的問題，一個(gè)屬性或者一個(gè)使用案例，需要去指定的網(wǎng)站去查詢。這算是好的呢，有些同學(xué)沒有自己的知識(shí)體系或者收藏資料。 每次遇到問題，都是baidu/google一下，然后CV大發(fā)一通。

其實(shí)，我們應(yīng)該把將 CSS 視為一組布局模式。每種布局模式都是一個(gè)可以實(shí)現(xiàn)或重新定義每個(gè) CSS 屬性的「算法」。我們使用 CSS 聲明（鍵/值對(duì)）提供算法，算法決定如何使用它們。

換句話說，我們編寫的 CSS 是這些算法的輸入，就像傳遞給函數(shù)的參數(shù)一樣。如果我們想真正熟悉 CSS，僅僅學(xué)習(xí)屬性是不夠的；我們必須學(xué)習(xí)算法如何使用這些屬性。

只有，我們?cè)趯?duì)一些布局模式有了一定的掌握之后，我們才會(huì)在遇到類似的問題，游刃有余的處理問題。或者說像調(diào)用函數(shù)一樣，輸入特定的參數(shù)，得到特定的結(jié)果。

所以，今天我們來換一種對(duì)Flex的思考角度，對(duì)它來一次深度解析。

還有一點(diǎn)，需要說明，下文中不會(huì)設(shè)計(jì)到特有屬性的介紹，并且還需要大家對(duì)Flex布局有一點(diǎn)的知識(shí)儲(chǔ)備。

比方說，下圖中標(biāo)注的一些概念下文中就不會(huì)過多介紹了。推薦大家先把阮老師的那個(gè)文章通讀幾遍，對(duì)Flex有一個(gè)大體的了解在閱讀下文。

圖片

好了，天不早了，干點(diǎn)正事哇。

我們能所學(xué)到的知識(shí)點(diǎn)

前置知識(shí)點(diǎn)

Flexbox 是個(gè)啥？

Flex Direction

對(duì)齊(Alignment)

假設(shè)大小(Hypothetical size)

增長(Grow)和萎縮(Shrink)

最小尺寸的陷阱

間距

包裹

1. 前置知識(shí)點(diǎn)

「前置知識(shí)點(diǎn)」，只是做一個(gè)概念的介紹，不會(huì)做深度解釋。因?yàn)?，這些概念在下面文章中會(huì)有出現(xiàn)，為了讓行文更加的順暢，所以將本該在文內(nèi)的概念解釋放到前面來?！溉绻蠹覍?duì)這些概念熟悉，可以直接忽略」同時(shí)，由于閱讀我文章的群體有很多，所以有些知識(shí)點(diǎn)可能「我視之若珍寶，爾視只如草芥，棄之如敝履」。以下知識(shí)點(diǎn)，請(qǐng)「酌情使用」。

CSS 布局算法

CSS 有不同的模式，確定它如何在頁面上布局元素。這些模式通常被稱為布局算法或布局模式。

在 CSS 中有七種布局模式，下圖是MDN_CSS_Layout_Mode[2]的描述

圖片

其中Multi-column layout估計(jì)大家沒咋接觸過，剩余的或多或少在我們平時(shí)開發(fā)中都有接觸過。

圖片

其中四種被使用最多。流動(dòng)、定位、flex和grid。

流動(dòng)布局(Flow Layout)

默認(rèn)情況下，CSS 使用所謂的流動(dòng)布局算法(也稱Normal flow)。流動(dòng)將頁面上的每個(gè)元素都視為屬于文本文檔。

塊級(jí)元素以垂直方式在頁面上重疊顯示。它們會(huì)盡量占用盡可能多的水平空間，同時(shí)盡量減少垂直空間的占用。

內(nèi)聯(lián)元素在水平方向上像段落中的文本一樣顯示在一起。它們通常具有固定的寬度和高度，這就是為什么許多其他我們可能想要使用的屬性在這些元素上不起作用的原因。我們可以通過將它們的顯示屬性更改為inline-block來更改此行為。

圖片

定位布局

如果在元素上使用 position 屬性，我們現(xiàn)在正在要求 CSS 根據(jù)定位布局算法顯示該元素。在此布局模式中，我們可以請(qǐng)求幾種不同類型的行為：

• 靜態(tài)(Static)
• 相對(duì)(Relative)
• 絕對(duì)(Absolute)
• 固定(Fixed)
• 粘性(Sticky)

絕對(duì)定位元素往往因?yàn)樵谄渌胤綗o法正常工作而被認(rèn)為是一種hacky的解決方案。

還有一點(diǎn)需要注意，根據(jù)我們使用的值的不同，我們可能需要「考慮元素的父級(jí)」。例如，在絕對(duì)定位元素中，該元素相對(duì)于其最近的定位布局祖先定位。這意味著 CSS 將查找 HTML 樹并找到最近的一個(gè)祖先，「該祖先也使用了這些值之一」。如果找不到，則絕對(duì)定位元素將相對(duì)于視口定位。

圖片

彈性盒布局

當(dāng) display 屬性設(shè)置為 flex 時(shí)，元素將根據(jù)彈性盒布局算法布置其子元素。

而它就是我們今天要講的重點(diǎn)，下文中有更多的介紹。

如果想了解更多的Flex的細(xì)節(jié)，可以參考w3c_flexbox[3]。

網(wǎng)格布局

網(wǎng)格與彈性盒類似，只要在元素上使用了 display: grid，就會(huì)開始使用網(wǎng)格布局算法。此布局算法將根據(jù)網(wǎng)格布局算法顯示所有子元素。

Grid 和 Flexbox 的區(qū)別在于，Grid 適用于布局具有列和行的二維內(nèi)容，而 Flexbox 適用于布局具有「一維內(nèi)容」，即單個(gè)列或行。

我們后面也會(huì)有針對(duì)Grid的文章，預(yù)估在 12 月份或者明年 1 月份。

替換元素

在 CSS 中，替換元素（Replaced Element）是指一個(gè)由瀏覽器根據(jù)元素的標(biāo)簽和屬性創(chuàng)建的、在渲染時(shí)展示的元素，而「不是由文檔中的內(nèi)容決定其顯示的元素」。這些元素通常是具有外部資源（如圖像或嵌入式框架）的元素，其內(nèi)容由瀏覽器根據(jù)其屬性和上下文動(dòng)態(tài)生成。

以下是一些常見的替換元素：

「<img> 元素：」通過src屬性引用外部圖像。

<img src="image.jpg" alt="Description" />

「<audio> 和 <video> 元素：」通過src屬性引用外部音頻或視頻文件。

<audio controls>
  <source src="audio.mp3" type="audio/mp3" />
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
</video>

「<iframe> 元素：」通過src屬性引用外部網(wǎng)頁或嵌入式內(nèi)容。

<iframe src="https://example.com"></iframe>

「<object> 元素：」用于嵌入外部資源，如 Flash 動(dòng)畫。

<object data="flash.swf" type="application/x-shockwave-flash">
  <!-- fallback content or alternate content -->
</object>

「<canvas> 元素：」通過 JavaScript 繪制圖形。

<canvas width="200" height="200"></canvas>

替換元素與非替換元素的主要區(qū)別在于，替換元素的渲染不依賴于文檔的其他部分。它們的外觀和尺寸通常由其屬性和外部資源決定。替換元素具有一定的固有尺寸，不受文本或子元素的影響。

在 CSS 中，替換元素還可以通過 object-fit 和 object-position 這樣的屬性進(jìn)行進(jìn)一步控制，以指定元素的替換內(nèi)容的顯示方式。例如：

img {
  object-fit: cover; /* 圖片按比例縮放并覆蓋整個(gè)容器 */
  object-position: center; /* 圖片在容器中居中顯示 */
}

2. Flexbox 是個(gè)啥？

CSS 由許多不同的布局算法組成，官方稱之為布局模式?！该糠N布局模式都是 CSS 中的一種小型子語言」。默認(rèn)布局模式是流式布局，但我們可以通過更改父容器上的display屬性來選擇使用Flexbox：

display:block

display:flex

當(dāng)我們將 display 設(shè)置為 flex 時(shí)，我們創(chuàng)建了一個(gè)flex格式化上下文。這意味著，默認(rèn)情況下，「所有子元素將根據(jù) Flexbox 布局算法定位」。

每種布局算法都是為解決特定問題而設(shè)計(jì)的。默認(rèn)的Flow布局旨在創(chuàng)建數(shù)字文檔；它本質(zhì)上是Microsoft Word的布局算法?！笜?biāo)題和段落以塊的形式垂直堆疊，而文本、鏈接和圖像等元素則不顯眼地位于這些塊內(nèi)部」。

Flexbox專注于在行或列中排列一組項(xiàng)目，并提供對(duì)這些項(xiàng)目的分布和對(duì)齊具有極大控制權(quán)。正如其名稱所示，F(xiàn)lexbox關(guān)注的是靈活性。我們可以控制項(xiàng)目是增長還是收縮，額外空間如何分配等。

3. Flex Direction

如前所述，F(xiàn)lexbox的關(guān)鍵在于「控制在行或列中元素的分布」。默認(rèn)情況下，項(xiàng)目將在「一行中側(cè)邊堆疊」，但我們可以通過使用flex-direction屬性切換到列：

flex-direction:row

flex-direction:column

使用flex-direction: row時(shí)，「主軸水平運(yùn)行，從左到右」。當(dāng)我們切換到flex-direction: column時(shí)，「主軸垂直運(yùn)行，從上到下」。

在Flexbox中，一切都「基于主軸」。算法不關(guān)心垂直/水平，甚至不關(guān)心行/列。所有規(guī)則都圍繞這個(gè)主軸以及垂直運(yùn)行的交叉軸結(jié)構(gòu)。

我們可以輕松切換水平布局到垂直布局。所有規(guī)則都會(huì)「自動(dòng)適應(yīng)」。這個(gè)特性是 Flexbox 布局模式獨(dú)有的。

子元素將「默認(rèn)」根據(jù)以下兩個(gè)規(guī)則定位：

1. 主軸(Primary Axis)：子元素將「緊密」排列在容器的「起始位置」。
2. 交叉軸(Cross Axis)：子元素將「伸展」以「填充整個(gè)容器」。

圖片

在Flexbox中，我們決定主軸是水平運(yùn)行還是垂直運(yùn)行。這是「所有 Flexbox 計(jì)算的基準(zhǔn)」。

4. 對(duì)齊(Alignment)

我們可以使用justify-content屬性來改變「子元素沿主軸」的分布方式：

圖片

圖片

圖片

圖片

圖片

由于主軸是row和column的情況很類似，下文中我們都按主軸為row來講解

當(dāng)涉及到主軸時(shí)，我們通常不考慮對(duì)齊單個(gè)子元素。相反，重點(diǎn)是關(guān)于整個(gè)組的分布。

我們可以將所有項(xiàng)目緊密堆疊在特定位置（使用flex-start、center和flex-end），或者我們可以將它們分開（使用space-between、space-around和space-evenly）。

對(duì)于交叉軸，情況有些不同。我們使用align-items屬性：

圖片

圖片

圖片

圖片

圖片

在align-items中，有一些與justify-content相同的選項(xiàng)，但并「沒有完全的重疊」。

圖片

為什么它們不共享相同的選項(xiàng)呢？我們將很快揭開這個(gè)謎團(tuán)，但首先，我需要分享另一個(gè)對(duì)齊屬性：align-self。

與justify-content和align-items不同，align-self應(yīng)用于子元素，而不是容器。它允許我們沿著交叉軸改變特定子元素的對(duì)齊方式：

圖片

圖片

圖片

圖片

圖片

align-self具有與align-items完全相同的值。實(shí)際上，它們改變的是完全相同的內(nèi)容。

align-items是一種語法糖，是一種方便的簡(jiǎn)寫，可以「一次性自動(dòng)設(shè)置所有子元素的對(duì)齊方式」。

Content VS items

在 Flexbox 中，項(xiàng)目沿著主軸分布?！改J(rèn)情況下，它們很好地排列在一起，側(cè)邊相鄰」。我可以畫一條直線，將所有子元素串起來，就像烤肉一樣：

圖片

然而，交叉軸是不同的?！敢粭l垂直的直線只會(huì)與其中一個(gè)子元素相交」。

這更像是垂直方向用牙簽串的烤腸，而不是烤肉串：

圖片

這里有一個(gè)顯著的區(qū)別。對(duì)于烤腸而言，「每個(gè)項(xiàng)目都可以沿著它的棍子移動(dòng)，而不會(huì)干擾其他項(xiàng)目」：

圖片

相比之下，通過我們的主軸串聯(lián)每個(gè)兄弟元素，一個(gè)單獨(dú)的項(xiàng)目如果要移動(dòng)位置，那勢(shì)必會(huì)影響周圍兄弟元素的。

圖片

這是主軸和交叉軸之間的基本區(qū)別。當(dāng)我們討論交叉軸上的對(duì)齊時(shí)，每個(gè)項(xiàng)目都可以隨心所欲。然而，在主軸上，我們「只能考慮如何分配整個(gè)組」。

針對(duì)上面的內(nèi)容，我們可以給出一個(gè)正確的定義：

• justify — 沿「主軸定位」某物。
• align — 沿「交叉軸定位」某物。
• content — 「一組」可以被分配的“東西”。
• items — 可以「單獨(dú)定位」的單個(gè)項(xiàng)目。

因此：我們有justify-content來控制沿主軸分配整個(gè)組，我們有align-items來沿交叉軸單獨(dú)定位每個(gè)項(xiàng)目。這是我們用來管理 Flexbox 布局的兩個(gè)主要屬性。

當(dāng)涉及到主軸時(shí)，我們必須將項(xiàng)目視為一個(gè)組，作為可以分配的內(nèi)容。

5. 假設(shè)大小(Hypothetical size)

假設(shè)我有以下的 CSS：

.item {
  width: 2000px;
}

我們第一直覺就是「我們將得到一個(gè)寬度為 2000 像素的項(xiàng)目」。其實(shí)這句話是不對(duì)的!

讓我們用一個(gè)例子來說明。

<style>
  .flex-wrapper {
    display: flex;
  }
  .item {
    width: 2000px;
  }
</style>

<div class="item"></div>

<div class="flex-wrapper">
  <div class="item"></div>
</div>

結(jié)果缺不一樣。

圖片

兩個(gè)項(xiàng)目都應(yīng)用了完全相同的 CSS。它們都有width: 2000px。然而，第一個(gè)項(xiàng)目比第二個(gè)項(xiàng)目寬得多！

差異在于「布局模式」。第一個(gè)項(xiàng)目是使用流式布局(flow)渲染的，在流式布局中，width是一個(gè)「硬性約束」。當(dāng)我們?cè)O(shè)置width: 2000px時(shí)，我們肯定能到一個(gè)寬度為 2000 像素的元素，即使它已經(jīng)超過當(dāng)前視口的寬度。

然而，在 Flexbox 中，width屬性的實(shí)現(xiàn)方式不同。這「更像是一個(gè)建議而不是硬性約束」。

規(guī)范對(duì)此有一個(gè)名字：「假設(shè)大小」(Hypothetical size)。

在這種情況下，限制因素是父元素沒有足夠的空間容納一個(gè)寬度為 2000px 的子元素。因此，子元素的大小被縮小，以「適應(yīng)空間」。

這是 Flexbox 哲學(xué)的核心部分?！甘挛锸橇鲃?dòng)和靈活的，可以根據(jù)世界的限制進(jìn)行調(diào)整」。

6. 增長(Grow)和萎縮(Shrink)

要真正了解 Flexbox 的流動(dòng)性，我們需要討論三個(gè)屬性：flex-grow、flex-shrink和flex-basis。

flex-basis

在 Flex行中，flex-basis的作用與width相同。在 Flex 列中，flex-basis的作用與height相同。

「Flexbox 中的一切都與主/交叉軸有關(guān)」。例如，justify-content將沿主軸分布子元素，無論主軸是水平還是垂直，它的工作方式都完全相同。

然而，width和height不遵循此規(guī)則！width「始終會(huì)影響水平尺寸」。當(dāng)我們將flex-direction從row切換到column時(shí)，它不會(huì)突然變成height。

因此，F(xiàn)lexbox 創(chuàng)建了一個(gè)通用的“大小”屬性，稱為flex-basis。它就像width或height，但與其他所有屬性一樣，「與主軸相關(guān)聯(lián)」。它允許我們?cè)O(shè)置元素在主軸方向上的假設(shè)大小，無論這是水平還是垂直。

下圖集中，每個(gè)子元素都被賦予了flex-basis: 50px，但可以調(diào)整第一個(gè)子元素的flex-basis。

圖片

圖片

圖片

就像我們?cè)趙idth中看到的那樣，flex-basis更像「是一個(gè)建議而不是一個(gè)硬性約束」。在某個(gè)時(shí)候，所有元素都沒有足夠的空間來保持它們被分配的大小，因此「它們必須妥協(xié)，以避免溢出」。

一般來說，在 Flex 行中，我們可以互換使用width和flex-basis，但也有一些例外情況。例如，width屬性對(duì)替換元素（如圖像）的影響與flex-basis不同。此外，width可以將項(xiàng)目減小到其最小尺寸以下，而flex-basis則不能。

flex-grow

默認(rèn)情況下，F(xiàn)lex 上下文中的元素將縮小到它們?cè)谥鬏S上的「最小舒適尺寸」。這通?！笗?huì)創(chuàng)建額外的空間」。

我們可以使用flex-grow屬性指定如何使用該空間：

圖片

圖片

flex-grow的「默認(rèn)值是 0」，這意味著增長是可選的。如果我們希望「子元素吞并容器中的任何額外空間」，我們需要明確告訴它。

如果多個(gè)子元素設(shè)置了flex-grow怎么辦？在這種情況下，「額外的空間將根據(jù)它們的flex-grow值成比例地分配給子元素」。

圖片

圖片

圖片

圖片

當(dāng)單個(gè)子元素被賦予正的flex-grow值時(shí)，它將「吞并所有額外的空間」。在這種情況下，數(shù)字是無關(guān)緊要的：1 和 1000 具有相同的效果。

flex-shrink

在我們迄今為止看到的大多數(shù)示例中，我們有額外的空間可以使用。如果我們的子元素太大而父容器無法容納怎么辦？

圖片

圖片

圖片

<<< 左右滑動(dòng)見更多 >>>

兩個(gè)項(xiàng)目都會(huì)收縮，但它們會(huì)「按比例收縮」。第一個(gè)子元素始終是第二個(gè)子元素寬度的 2 倍。

flex-basis和width設(shè)置了元素的假設(shè)大小。Flexbox算法可能會(huì)「將元素收縮到低于這個(gè)期望大小」，但「默認(rèn)情況下，它們將始終按比例縮放，保持兩個(gè)元素之間的比例」。

如果我們不希望元素按比例縮小,可以使用flex-shrink屬性。

圖片

圖片

圖片

圖片

圖片

圖片

現(xiàn)在我們有兩個(gè)子元素，每個(gè)都有一個(gè)假設(shè)大小為 250px。容器至少需要 500px 寬度，以便將這些子元素以其假設(shè)大小容納其中。

假設(shè)我們將容器縮小到 400px。嗯，我們不能把 500px 的內(nèi)容塞進(jìn)一個(gè) 400px 的袋子里！我們有 100px 的虧空。為了使它們適應(yīng)，我們的元素將需要放棄總共 100px。

flex-shrink屬性讓我們決定如何處理這個(gè)虧空。

與flex-grow類似，它是一個(gè)比例。「默認(rèn)情況下，兩個(gè)子元素的flex-shrink都是 1，因此每個(gè)子元素消化虧空的一半」。它們各自放棄 50px，它們的實(shí)際大小從 250px 縮小到 200px。

現(xiàn)在，假設(shè)我們將第一個(gè)子元素提高到flex-shrink: 3：

圖片

我們總的虧空是 100px。通常，每個(gè)子元素將支付 1/2，但由于我們已經(jīng)調(diào)整了flex-shrink，第一個(gè)元素最終支付了 3/4（75px），第二個(gè)元素支付了 1/4（25px）。

「絕對(duì)值并不重要，一切都取決于比例」。如果兩個(gè)子元素都具有flex-shrink: 1，每個(gè)子元素將支付總虧空的 1/2。如果兩個(gè)子元素都增加到flex-shrink: 1000，每個(gè)子元素將支付總虧空的 1000/2000。無論如何，最終效果都是相同的。

對(duì)flex-shrink：我們可以將其視為flex-grow的“反面”。它們是同一硬幣的兩面：

• flex-grow 控制當(dāng)項(xiàng)目小于其容器時(shí)額外空間的「分配方式」。
• flex-shrink 控制項(xiàng)目大于其容器時(shí)空間的「移除方式」。

這意味著這兩個(gè)屬性中只能有一個(gè)生效。如果有額外的空間，flex-shrink沒有影響，因?yàn)轫?xiàng)目不需要縮小。如果子元素太大而無法容納，flex-grow沒有影響，因?yàn)闆]有額外的空間可分配。

防止縮小

有時(shí)，我們不希望 Flex 子元素縮小。

讓我們看一個(gè)例子：

圖片

當(dāng)容器變窄時(shí)，我們的兩個(gè)圓形被擠變形了。如果我們希望它們保持圓形怎么辦？

我們可以通過設(shè)置flex-shrink: 0來實(shí)現(xiàn)：

圖片

圖片

圖片

當(dāng)我們將flex-shrink設(shè)置為 0 時(shí)，實(shí)質(zhì)上我們「完全退出了縮小過程」。Flexbox 算法將flex-basis（或width）視為硬最小限制。

7. 最小尺寸的陷阱

假設(shè)我們正在構(gòu)建一個(gè)搜索表單：

圖片

當(dāng)容器縮小到一定程度以下時(shí)，內(nèi)容溢出！

「根本原因是flex-shrink 的默認(rèn)值是 1」，我們?cè)谑纠性O(shè)置了該屬性，按道理輸入框應(yīng)該能夠縮小到它需要的程度！但是卻事與愿違。

原因是：除了假設(shè)大小之外，F(xiàn)lexbox 算法還關(guān)心另一個(gè)重要的大?。骸缸钚〈笮　?。

Flexbox算法拒絕將子元素縮小到其最小大小以下。無論我們?nèi)绾卧黾觙lex-shrink,內(nèi)容將溢出而不是繼續(xù)縮小！

文本輸入框的默認(rèn)最小大小為 170px-200px（在不同的瀏覽器之間有所變化）。

在其他情況下，限制因素可能是元素的內(nèi)容。

圖片

圖片

圖片

對(duì)于包含文本的元素，最小寬度是最長不可斷開的字符串的長度。

好消息是：我們可以「使用min-width屬性重新定義最小大小」。

圖片

通過直接在 Flex 子元素上設(shè)置min-width: 0px，我們告訴 Flexbox 算法覆蓋內(nèi)置的最小寬度。因?yàn)槲覀儗⑵湓O(shè)置為 0px，所以元素可以縮小到必要的程度。

8. 間距

gap允許我們?cè)诿總€(gè) Flex 子元素之間創(chuàng)建空間。

這對(duì)于諸如導(dǎo)航標(biāo)題之類的東西非常有用：

圖片

自動(dòng)邊距

margin屬性用于在特定元素周圍添加空間。在某些布局模式中，如 Flow 和Positioned(前面都有過介紹)，它甚至可以用于通過margin: auto將元素居中。

在 Flexbox 中，自動(dòng)邊距變得更加有趣：

圖片

圖片

圖片

「自動(dòng)邊距將吞噬額外的空間，并將其應(yīng)用于元素的邊距」。它使我們能夠精確控制在哪里分配額外的空間。

一個(gè)常見的頁眉布局特點(diǎn)是在一側(cè)放置標(biāo)志，而在另一側(cè)放置一些導(dǎo)航鏈接。

<style>
  ul {
    display: flex;
    gap: 12px;
  }
  li.logo {
    margin-right: auto;
  }
</style>

<nav>
  <ul>
    <li class="logo">
      <a href="/"> 首頁 </a>
    </li>
    <li>
      <a href=""> 語言 </a>
    </li>
    <li>
      <a href=""> 個(gè)人中心 </a>
    </li>
  </ul>
</nav>

ul {
  list-style-type: none;
}
ul a {
  text-decoration: none;
}

圖片

列表中的第一項(xiàng)通過給它設(shè)置margin-right: auto，我們「聚集了所有額外的空間，并強(qiáng)制將其放在第一項(xiàng)和第二項(xiàng)之間」。

使用瀏覽器devtool來查看元素信息。

圖片

9. 包裹

到目前為止，我們的所有項(xiàng)目都是并排或縱列的。flex-wrap屬性允許我們改變這一點(diǎn)。

如果容器寬度不能包含子元素的話，子元素會(huì)被隱藏。

圖片

我們可以通過設(shè)置flex-wrap:wrap來讓子元素自動(dòng)換行。

圖片

圖片

當(dāng)我們?cè)O(shè)置flex-wrap: wrap時(shí)，項(xiàng)目不會(huì)收縮到其假設(shè)大小以下。

使用flex-wrap: wrap，我們「不再有一個(gè)可以穿過每個(gè)項(xiàng)目的單一主軸線」。實(shí)際上，「每一行都充當(dāng)其自己的小型 Flex 容器」。

當(dāng)我們有多行時(shí)，交叉軸現(xiàn)在可能與多個(gè)項(xiàng)目相交！

圖片

圖片

圖片

圖片

每一行都是其自己的小型 Flexbox 環(huán)境。align-items將在包圍每一行的無形框內(nèi)上下移動(dòng)每個(gè)項(xiàng)目。

但如果我們想對(duì)齊行本身怎么辦？我們可以使用align-content屬性：

圖片

圖片

圖片

圖片

圖片

總結(jié)一下這里發(fā)生的情況：

• flex-wrap: wrap給我們兩行東西。
• 在每一行內(nèi)，align-items允許我們將每個(gè)單獨(dú)的子項(xiàng)上下滑動(dòng)。
• 然而，在整體上，我們有兩行在一個(gè)單一的 Flex 上下文內(nèi)！現(xiàn)在，交叉軸將與兩行相交，而不是一行。因此，我們不能單獨(dú)移動(dòng)行，我們需要將它們作為一個(gè)組進(jìn)行分配。
• 使用我們上面的定義，我們正在處理內(nèi)容，而不是項(xiàng)目。但我們?nèi)匀辉谡務(wù)摻徊孑S！因此，我們想要的屬性是align-content。

Reference

[1]Flex 布局教程：語法篇:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]MDN_CSS_Layout_Mode:https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode

[3]w3c_flexbox:https://www.w3.org/TR/css-flexbox-1/