給萌新的Flexbox簡易入門教程

近幾年，CSS領域出現了一些複雜的專用佈局工具，用以代替原有的諸如使用表格、浮動和絕對定位之類的各種變通方案。Flexbox，或者說是彈性盒子佈局模組（Flexible Box Layout Module）是這些新佈局工具中的第一個，接著是CSS網格佈局模組（CSS Grid Layout Module）。我們會在本文給出一個易於理解的flexbox入門介紹。

隨著CSS網格佈局的引入，你可能會問flexbox佈局是否真的還有必要。雖然它們所能做的事情有一些重疊，但其各自在CSS佈局中有著非常特別的目的。一般來說，flexbox在一維場景（比如，一串類似的元素）下有最佳應用，而網格是二維場景下理想的佈局方案（例如整個頁面的元素）。

即便如此，flexbox仍可以用於整個頁面的佈局，這樣它能為那些還不支援網格佈局的瀏覽器提供合適的相容處理。（必須承認，網格佈局正在大多數現代瀏覽器中快速得到支援，不過對flexbox的支援仍然更為廣泛，所以如果你想讓你的佈局在稍微老舊的瀏覽器中也生效，使用flexbox作為網格佈局的降級方案是很容易的）。

使用Flexbox的好處

flexbox的一些好處是：

頁面元素能被任意方向地放置（靠左、靠右、從上往下甚至從下往上）
佈局內容的可視順序能夠被反轉或重排
元素大小能“彈性”適應可用空間，並根據容器或者兄弟元素進行相應地對齊
能輕鬆實現等列寬佈局（與每一列裡面的內容無關）

為了闡述其多樣的屬性和可能性，讓我們假設下面有這樣的佈局用例：

<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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

header content here

</header>

<nav>

nav content here

</nav>

main content here

</div>

<aside>

aside content here

</aside>

</main>

footer content here

</footer>

</div>

首先，是把元素一起放進.main裡，比如，<nav>和<aside>。如果沒有flexbox，我們可能會把三個元素全部進行浮動，但想讓它按理想的方式工作顯得並不直觀。而且，按傳統的方式做這件事會出現一個眾所周知的問題：每一列僅僅和它的內容一樣高。因此，你可能需要把三個元素都設定為統一的高度，或者使用某種黑科技。

讓flexbox來救場吧。

讓我們Flex

flexbox的要點是出現在display屬性上的flex值，它需要被設定在容器元素上。如此設定會讓它的子元素變成“彈性專案（flex item）”。這些彈性專案擁有一些易於使用的預設屬性。比如，它們被緊挨著放置，那些沒有特別指明寬度的元素自動佔滿了剩餘的空間。

因此，如果你給.main設定了display:flex，它的子元素.content就被自動擠在<nav>和<aside>之間。不需要再多餘的計算，多麼方便是吧？作為附加獎賞，所有三個元素神奇地擁有了相同的高度。

.main {
  display: flex;
}

1

2

3

.main {

display: flex;

}

請檢視下面的例子，包含了所有的細節：flexbox-demo-1。

項的順序：Flebox的order屬性

另外一個flexbox的能力，是能夠輕鬆改變元素的顯示順序。讓我們假設你為一個客戶製作了上面的佈局，而她現在想要.content出現在<nav>之前。

通常，你需要深入到HTML原始碼中去，在那裡改變元素的順序。而有了Flexbox，你可以完全使用CSS完成這項任務。只需把.content的order屬性設定為-1，那麼這一列就會出現在前面，這本例就是最左邊。

.main {
  display: flex;
}

.content {
  order: -1;
}

1

2

3

4

5

6

7

.main {

display: flex;

}

.content {

order: -1;

}

本例中，你不需要改變其他列的order。例子在flexbox-demo-2。

如果你傾向於顯式地為每一列指定order，你可以將.content的order設為1，把<nav>的order設為2，把<aside>的設為3。

HTML原始碼獨立於CSS的Flexbox樣式

但你的客戶並不滿足。她想讓<footer>成為頁面的第一個元素，顯示在<header>之前。那好，同樣的，flexbox是你的朋友（雖然像在此例中，可能你得跟你的客戶好好談談，而不是跟隨指示）。因為你不僅要重排列內部元素，還要重排外部的，display:flex規則將被設定在<div class=”example”>之上。注意這裡是如何在頁面中巢狀使用flex容器來達到你想要的效果的。

因為<header>，<main class=”main”>和<footer>相互堆疊著，你需要首先設定一個垂直上下文，它能夠通過設定flex-direction:column來快速完成。還有，<footer>的order被設定為-1，如此一來它就出現在頁面的最上頭。就這麼簡單。

給萌新的Flexbox簡易入門教程

相關文章