為什麼要學 Flexbox ？還沒學習 Flexbox 的我們，想要讓文字段落並排顯示時，只能調整元素的寬度讓它為了適應大小自動換行，這樣實在太不方便了！為了能調出想像中的版面， Flexbox 就由此而生。

還沒學習 Flexbox 的時候... （圖內文章引用自MDN Web Docs - Flexbox）

Flexbox

簡單來說，Flex 排版就是將元素放進一個彈性的容器裡面進行排版，內部的元素可以在容器裡面依照各種方向來排列，而容器也可以任意擴張或縮放，控制內容空間的大小。

只要在指定的元素設置 display 屬性為 flex，該元素就會變成上圖藍色部分的外容器 (Container)：

display: flex;

定義排列方向

內元素 (item) 的排列方式到底有哪些？每一個彈性容器內都會設置兩個軸 (Axes) — 主要軸 (main axis) 和 交錯軸 (cross axis)。盒子裡的元素就依據主要軸的方向來排列，交錯軸則是垂直於主軸的規則線。

可以在外容器設置 flex-direction，更改主軸的方向，預設值是 row：

flex-direction: row | row-reverse | column | column-reverse;

一般情況下，元素會沿著主軸的方向呈一直線排列下去，當然也有讓元素換行排列的設定 flex-wrap ，預設值是 nowrap 不換行：

flex-wrap: nowrap | wrap | wrap-reverse;

設定元素對齊方式

• justify-content：設定主軸方向的對齊模式，預設值是 flex-start：

  justify-content: flex-start | flex-end | center | space-between | space-around;
  

  

• align-items：設定交錯軸方向的對齊模式，預設值是 stretch：

  align-items: stretch | flex-start | flex-end | center | baseline;
  

  

• align-content：align-items的另一個版本，設定多行(Wrap) 的情況下，交錯軸方向的對齊模式。

  

以上都是透過在外容器設定內部元素的排列對齊方式，那當我們想要針對內元素設定個別的指令，比如：我想要只有第二個元素置中，該怎麼做？

可以使用 align-self，設定個別元素交錯軸方向的對齊模式，會覆蓋掉外容器 align-item 的設定，預設值是 auto：

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

有了 Flexbox 之後

怎麼樣，認識了 Flexbox 之後，是不是覺得所有的網頁元素都在你的掌握之中，你想要它去哪就去哪。讓我們搭時光機回到最開始，這次就利用 Flex 排版來讓文章並排顯示，做出想要的排版。

原始 HTML

<h1>Flex Box</h1>
<h2>The two axes of flexbox</h2>
<p>When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.</p>
<h3>The main axis</h3>
<p>The main axis is defined by flex-direction, which has four possible values:row/row-reverse/column/column-reverse</p>
<h3>The cross axis</h3>
<p>The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.</p>

原始 CSS

body{
  background-color: #C5DECD;
}
h1,h2,h3,p {
  font-family: "Noto Sans CJK TC";
  color: #495159;
}

用 Flexbox 的邏輯，想像一下文章並排的話：

• 內元素（黃色區域）：將一體的文章 Group 起來
• 外容器（藍色區域）：負責將內元素排成以左到右並排顯示

目前少了藍色和黃色的容器，新增 <div class="flex-item"> 當作內元素（黃色區域），將兩塊文章包起來：

<div class="flex-item">
    <h3>The main axis</h3>
    <p>The main axis is defined by flex-direction...</p>
</div>
<div class="flex-item">
    <h3>The cross axis</h3>
    <p>The cross axis runs perpendicular to the main axis...</p>
</div>

再來是控制排列方式的外容器（藍色區域），新增 <div class="flex-container"> ，將要並排顯示的內元素（黃色區域）包起來：

<div class="flex-container">
    <div class="flex-item">
        ...
    </div>
    <div class="flex-item">
        ...
    </div>
</div>

配置完 Flexbox 的必備品外容器和內元素，但還沒加上讓外容器變成彈性盒子的樣式屬性，只要在 CSS 設定 .flex-container 成為 Flex 容器：

.flex-container{
  display: flex;
}

大功告成！才加一段程式碼太簡單了吧！因為 flow-direction 的預設值是 row ，所以只要將容器變成 Flex box，內部的文章就會自動以由左往右的方向去排列，自然就變成並排的模式。

另外你還可以參考 FlexboxFroggy，透過練習移動小青蛙成為Flex大師

小結

當然不只有像本文舉例的，還有各式各樣的網站版面，但大家只要熟記 Flexbox 的思考模式，之後遇到什麼樣的排版都能輕而易舉做出來！而除了 Flexbox ，另一個很熱門的網頁佈局方式 — CSS Grid，與 Flexbox 各有優勢，也是一套很方便的排版工具，就留給大家慢慢學習囉。明天的章節會提到調整網頁因應不同裝置螢幕大小的概念 — RWD 響應式網頁設計，那我們就下章再會囉！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• MDN Web Docs - Flexbox