對初學者Flexbox的友好介紹

CSS Flexbox：一維佈局利器

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

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

然而，Flexbox 也可以用於全頁面佈局，因此在不支持Grid的瀏覽器中，它可以作為Grid佈局的有效備選方案。 （雖然Grid在大多數現代瀏覽器中的支持度已經迅速提高，但Flexbox的支持範圍仍然更廣，如果您需要佈局在一些較舊的瀏覽器中也能正常工作，這一點非常實用。）

Flexbox 的優勢

Flexbox 的一些優勢包括：

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

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

<code class="language-html"><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></code>

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

Flexbox 應運而生。

開始使用Flexbox

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

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

<code class="language-html"><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></code>

元素順序：Flexbox order 屬性

Flexbox的另一個屬性是可以輕鬆更改元素的順序。假設您為客戶構建了上述佈局，而她現在希望.content出現在<nav></nav>之前。

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

<code class="language-css">.main {
  display: flex;
}</code>

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

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

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

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

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

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

如何使用Flexbox對齊項目

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

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

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

• 將每個形狀的align-self屬性設置為適當的值。可能的值包括：center、stretch（元素定位以適應其容器）、flex-start、flex-end和baseline（元素定位在其容器的基線處）。
• 將容器元素設置為display: flex。
• 最後，請注意父容器上的flex-direction屬性，因為它的值會影響子元素的對齊方式。

<code class="language-html"><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></code>

如果父容器內的所有元素都需要以相同的方式對齊，則可以在父容器中使用align-items屬性。可能的值包括center、flex-start、flex-end、stretch（默認值：項目被拉伸以適應其容器）和baseline（項目定位在其容器的基線處）。

<code class="language-css">.main {
  display: flex;
}</code>

使用Flexbox對齊內容

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

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

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

<code class="language-css">.main {
  display: flex;
}

.content {
  order: -1;
}</code>

使用Flexbox調整項目尺寸

使用flex屬性，您可以控制元素相對於Flex容器內其他元素的長度。

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

• flex-grow — 指定元素相對於其他彈性元素增長多少的數字。
• flex-shrink — 指定元素相對於其他彈性元素收縮多少的數字。
• flex-basis — 元素的長度。可接受的值包括：auto、inherit或後跟“%”、“px”、“em”或任何其他長度單位的數字。

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

<code class="language-css">.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}</code>

如果您需要內容區域的寬度是<nav></nav>和<aside></aside>的兩倍，請為.content設置flex: 2，並將其他兩個保留為1：

更多資源

結論

如您所見，如果您需要控製網站上元素的位置，Flexbox可以使我們的生活輕鬆得多。它非常可靠，使我們每天必須處理的任何技巧、折疊容器或其他奇怪的東西都過時了。

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

關於CSS Flexbox的常見問題解答（FAQ）

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