CSS Flexbox：一維布局利器

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

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

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

Flexbox 的優(yōu)勢(shì)

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

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

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

<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>，并排顯示。如果沒(méi)有Flexbox，我們可能會(huì)使用浮動(dòng)來(lái)排列這三個(gè)元素，但這并不會(huì)非常直接。此外，傳統(tǒng)的方法會(huì)帶來(lái)一個(gè)眾所周知的問(wèn)題：每一列的高度都與其內(nèi)容高度相同。因此，您需要為所有三列設(shè)置相同的高度才能使它們長(zhǎng)度一致，或者使用某種技巧。

Flexbox 應(yīng)運(yùn)而生。

開(kāi)始使用Flexbox

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

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

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

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

.main {
  display: flex;
}

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

使用Flexbox獨(dú)立于CSS樣式的HTML源代碼

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

.main {
  display: flex;
}

.content {
  order: -1;
}

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

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

如何使用Flexbox對(duì)齊項(xiàng)目

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

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

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

• 將每個(gè)形狀的align-self屬性設(shè)置為適當(dāng)?shù)闹??？赡艿闹蛋ǎ?code>center、stretch（元素定位以適應(yīng)其容器）、flex-start、flex-end和baseline（元素定位在其容器的基線(xiàn)處）。
• 將容器元素設(shè)置為display: flex。
• 最后，請(qǐng)注意父容器上的flex-direction屬性，因?yàn)樗闹禃?huì)影響子元素的對(duì)齊方式。

<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)的所有元素都需要以相同的方式對(duì)齊，則可以在父容器中使用align-items屬性?？赡艿闹蛋?code>center、flex-start、flex-end、stretch（默認(rèn)值：項(xiàng)目被拉伸以適應(yīng)其容器）和baseline（項(xiàng)目定位在其容器的基線(xiàn)處）。

.main {
  display: flex;
}

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

另一個(gè)對(duì)齊屬性是justify-content，當(dāng)您希望在多個(gè)元素之間平均分配可用空間時(shí)，它非常方便。

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

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

.main {
  display: flex;
}

.content {
  order: -1;
}

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

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

此屬性是以下各個(gè)屬性的簡(jiǎn)寫(xiě)：

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

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

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

footer {
  order: -1;
}

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

更多資源

結(jié)論

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

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

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

（此處應(yīng)添加常見(jiàn)問(wèn)題的解答，與原文檔保持一致）

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