CSS Flexbox：一維布局利器

Flexbox，即彈性盒布局模塊，是CSS中用于創(chuàng)建一維布局（例如一系列相似項目）的強大工具。它尤其適用于單行或單列的布局，并且可以作為舊版瀏覽器中Grid布局的可靠替代方案。本文將為您提供一個易于理解的Flexbox入門指南。

盡管CSS Grid布局的出現(xiàn)，F(xiàn)lexbox仍然具有其獨特的價值。兩者雖然存在一些功能重疊，但它們在CSS布局中扮演著不同的角色。一般來說，F(xiàn)lexbox更適合一維布局（例如，一系列相似項目），而Grid則更適合二維布局（例如整個頁面的元素）。

然而，F(xiàn)lexbox 也可以用于全頁面布局，因此在不支持Grid的瀏覽器中，它可以作為Grid布局的有效備選方案。（雖然Grid在大多數(shù)現(xiàn)代瀏覽器中的支持度已經(jīng)迅速提高，但Flexbox的支持范圍仍然更廣，如果您需要布局在一些較舊的瀏覽器中也能正常工作，這一點非常實用。）

Flexbox 的優(yōu)勢

Flexbox 的一些優(yōu)勢包括：

• 頁面內(nèi)容可以向任何方向布局（向左、向右、向下甚至向上）。
• 內(nèi)容片段的視覺順序可以反轉(zhuǎn)或重新排列。
• 項目可以“靈活”調(diào)整大小以響應可用空間，并可以相對于其容器或彼此對齊。
• 創(chuàng)建等寬列布局（無論每列中的內(nèi)容量多少）都非常容易。

為了說明各種屬性和可能性，讓我們假設(shè)以下簡單的布局，作為本文中一些演示的示例：

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

第一步是將元素放置在.main內(nèi)，即<nav>和<aside>，并排顯示。如果沒有Flexbox，我們可能會使用浮動來排列這三個元素，但這并不會非常直接。此外，傳統(tǒng)的方法會帶來一個眾所周知的問題：每一列的高度都與其內(nèi)容高度相同。因此，您需要為所有三列設(shè)置相同的高度才能使它們長度一致，或者使用某種技巧。

Flexbox 應運而生。

開始使用Flexbox

Flexbox的核心是display屬性的flex值，需要將其設(shè)置為容器元素。這樣做會將它的子元素變成“彈性項目”。這些項目默認會獲得一些方便的屬性。例如，它們會并排放置，并且沒有指定寬度的元素會自動占據(jù)剩余空間。

因此，如果您將.main的display設(shè)置為flex，它的.content子元素會自動擠在<nav>和<aside>之間。無需任何計算，是不是很方便？作為額外獎勵，這三個元素會神奇地具有相同的高度。

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

元素順序：Flexbox order 屬性

Flexbox的另一個屬性是可以輕松更改元素的順序。假設(shè)您為客戶構(gòu)建了上述布局，而她現(xiàn)在希望.content出現(xiàn)在<nav>之前。

通常，您需要深入HTML源代碼并更改那里的順序。使用Flexbox，您可以完全通過CSS來完成此任務。只需將.content的order屬性設(shè)置為-1，內(nèi)容列就會排在前面。

.main {
  display: flex;
}

在這種情況下，您不需要為其他列顯式聲明order值。

使用Flexbox獨立于CSS樣式的HTML源代碼

但您的客戶還不滿意。她希望<footer>成為頁面上的第一個元素，甚至在<header>之前。好吧，F(xiàn)lexbox再次成為您的朋友（盡管在這種情況下，也許最好教育您的客戶而不是一味順從）。由于您需要重新排列內(nèi)部元素和外部元素，因此必須為<div>設(shè)置display: flex規(guī)則。請注意，您可以將Flex容器嵌套在網(wǎng)頁中以實現(xiàn)您想要的結(jié)果。因為<header>、<main>和<footer>是垂直堆疊的，所以您需要首先設(shè)置一個垂直上下文，您可以使用flex-direction: column快速完成此操作。此外，<footer>的order值為-1，因此它將首先出現(xiàn)在頁面上。就這么簡單。

.main {
  display: flex;
}

.content {
  order: -1;
}

因此，如果您想將一行元素更改為一列或反之亦然，您可以使用flex-direction屬性并將其設(shè)置為column或row（row是默認值）：

但是，能力越大，責任越大：請記住，許多訪問者將使用鍵盤來瀏覽您基于Flexbox的網(wǎng)站，因此，如果HTML源代碼中的元素順序與屏幕上顯示的順序不符，則可訪問性可能會成為一個嚴重的問題。

如何使用Flexbox對齊項目

Flexbox還可以非常直接地水平和垂直對齊其子元素。

您可以使用align-items對Flex容器內(nèi)的所有元素應用相同的對齊方式。如果您希望為各個項目設(shè)置不同的對齊方式，請使用align-self。元素的對齊方式取決于flex-direction屬性的值。如果其值為row（即元素水平排列），則對齊方式應用于垂直軸。如果flex-direction設(shè)置為column（即元素垂直排列），則它應用于水平軸。

例如，您有一些形狀，您希望在容器元素內(nèi)以不同的方式對齊它們。您需要：

• 將每個形狀的align-self屬性設(shè)置為適當?shù)闹怠？赡艿闹蛋ǎ?code>center、stretch（元素定位以適應其容器）、flex-start、flex-end和baseline（元素定位在其容器的基線處）。
• 將容器元素設(shè)置為display: flex。
• 最后，請注意父容器上的flex-direction屬性，因為它的值會影響子元素的對齊方式。

<div class="example">
  <header>header content here</header>
  <main class="main">
    <nav>nav content here</nav>
    <div class="content">main content here</div>
    <aside>aside content here</aside>
  </main>
  <footer>footer content here</footer>
</div>

如果父容器內(nèi)的所有元素都需要以相同的方式對齊，則可以在父容器中使用align-items屬性?？赡艿闹蛋?code>center、flex-start、flex-end、stretch（默認值：項目被拉伸以適應其容器）和baseline（項目定位在其容器的基線處）。

.main {
  display: flex;
}

使用Flexbox對齊內(nèi)容

另一個對齊屬性是justify-content，當您希望在多個元素之間平均分配可用空間時，它非常方便。

可接受的值包括：center、flex-start、flex-end、space-between（項目之間有空格）和space-around（項目之前、之間和之后都有空格）。

例如，在您一直使用的簡單HTML模板中的<main>元素內(nèi)，您可以找到三個元素：<nav>、.content和<aside>。目前，它們都被推到頁面的左側(cè)。如果您希望以某種方式顯示這三個元素，以便在它們之間創(chuàng)建一些空間，而不是在第一個和最后一個元素的左端和右端分別創(chuàng)建空間，請將.main（它們的父容器）內(nèi)的justify-content設(shè)置為space-between：

.main {
  display: flex;
}

.content {
  order: -1;
}

使用Flexbox調(diào)整項目尺寸

使用flex屬性，您可以控制元素相對于Flex容器內(nèi)其他元素的長度。

此屬性是以下各個屬性的簡寫：

• flex-grow — 指定元素相對于其他彈性元素增長多少的數(shù)字。
• flex-shrink — 指定元素相對于其他彈性元素收縮多少的數(shù)字。
• flex-basis — 元素的長度?？山邮艿闹蛋ǎ?code>auto、inherit或后跟“%”、“px”、“em”或任何其他長度單位的數(shù)字。

例如，要獲得三列等寬列，只需為每列設(shè)置flex: 1即可：

.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}

如果您需要內(nèi)容區(qū)域的寬度是<nav>和<aside>的兩倍，請為.content設(shè)置flex: 2，并將其他兩個保留為1：

更多資源

結(jié)論

如您所見，如果您需要控制網(wǎng)站上元素的位置，F(xiàn)lexbox可以使我們的生活輕松得多。它非常可靠，使我們每天必須處理的任何技巧、折疊容器或其他奇怪的東西都過時了。

如前所述，如今用于全頁面布局的更好選擇是CSS Grid，但仍然值得了解Flexbox的功能范圍。Flexbox最適合在一維中對齊相關(guān)項目，但如果需要，它也可以作為在較舊瀏覽器中Grid工作的便捷備選方案。

關(guān)于CSS Flexbox的常見問題解答（FAQ）

（此處應添加常見問題的解答，與原文檔保持一致）

以上是對初學者Flexbox的友好介紹的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！