CSS | Flexbox

2022-01-25

CSS Flexbox 相較於 Float ，更適合處理一維度的 Components 例如 Navbar, Card 等，對於一維度的元素延展以及對齊非常方便。

JavaScript logo

Flex Properties

Flex-Direction

flex-direction 用來控制 Flex 的 Main Axis 以及 Cross Axis，決定元素的排列方向是水平或者垂直。

  flex-direction: row; 
  /* Default Direction */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Flex-Wrap

預設的情況下 flex-wrap 是不自動換行，也就是 no wrap，flex 會把所有的元素使勁塞在同一列。

flex-wrap: no-wrap;
flex-wrap: wrap
flex-wrap: wrap-reverse

Flew-Flow

flex-flow 是簡寫技巧，相當於 flex-direction + flex-wrap。

flex-flow: row-reverse wrap;

Justify-Content

Justify-Content 是使用 Flex 最常使用的 CSS 屬性，可以控制 Main Axis 中元素的對齊方式 (Alignment)。尤其適合處理一維的 Components 例如 Navbar 以及 Card 的對齊方式。

Justify-Content 是每一個 CSS 人 Flexbox Lover 不可以錯過的重要屬性 😊

justify-content: flex-start
/* Default */
justify-content: end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: space-evenly

Align-Items

align-items 預設為 strech 對於沒有設定 Height 的元素，會自動伸展自 Flex 容器的最大高度，解決了以往多欄元素要保持高度一致的困難。

例如以往 Bootsrap3 的 Grid System 不同 Col 因為有不同的元素高度，會讓高度較高的元素干擾到換列的元素。這個問題在 Bootsrap 4 改採 Flex 設計 Grid System 後已經不復存在。

以下示範將 Flex Container 的高度調整為 200px

align-items: stretch
/* Default */

除了有自帶高度的元素外，會被拉升到與容器同樣高度。

Element Without Height & Width
Width Decide by Elements Content
Lorem
Ipsum
Egg Ham Spam
align-items: flex-start

元素依照自己的高度，並由開頭開始對齊。

Element Without Height & Width
Short Height
Lorem
Ipsum
Egg Ham Spam
align-items: flex-end

元素依照自己的高度，並由底端開始對齊。

Element Without Height & Width
Short Height
Lorem
Ipsum
Egg Ham Spam
align-items: center

元素依照自己的高度，並由中間進行對齊。

Element Without Height & Width
Short Height
Lorem
Ipsum
Egg Ham Spam
align-items: baseline

baseline 的屬性效果尚無法正確呈現 🙄

Element Without Height & Width
Short Height
Lorem
Ipsum
Egg Ham Spam

Align-Content

align-content 需要搭配 flex-wrap 一起使用，如果單獨使用不會有任何效果。而搭配 flex-wrap 則可以用於控制多列元素的對齊方式。

相對於 justify-content 是對 Main Axis 進行對齊設定； align-content 是用於對 Cross Axis 進行對齊設定。

以下示範將 Flex Container 的高度調整為 300px

align-content: stretch
/* Default */

在預設的 strech 下，如果元素本身沒有高度，會被均分自動延伸到最大高度：

但如果元素有高度就不受影響例如橘色塊或者海草綠色塊。

align-content: flex-start
align-content: flex-end
align-content: space-between
align-content: space-around
align-content: center

Gap

gap 會令 Flex 容器下的元素增加邊距，可以和 justify-content 混合使用。

預設沒有 gap 的情況下，元素是彼此先鄰的，微小的距離是來自於 border。

gap: 1rem
gap: 2rem 1rem

gap 可以分別對 Cross Axis 以及 Main Axis 指定數值。

Order

使用 order 可以調整 flex 容器個別元素的順序，數值越小的順序越高，預設元素的 order 都是 0。

<div class="d-flex">
  <div class="box R" style="order: 1"></div>
  <div class="box G"></div>
  <div class="box B" style="order: -1"></div>
</div>
<div class="d-flex" style="flex-direction: column">
  <div class="box bg-R"></div>
  <div class="box bg-G"></div>
  <div class="box bg-B" style="order: -1"></div>
</div>

Flex-Grow

使用 flex-grow 會忽略原本元素的寬度，會將扣除未設定 flex-grow 並且具有 width 的元素的 width，並將剩下的 width 按照 flex-grow 之和去分配給各具有 flex-grow 的元素。

例如下列範例，藍色元素寬度為 250px，則會以 Flex 容器的 850px 先減去 250px，在分為 3 等份，其中橘色塊佔有 2 等份、草綠色佔有 1 等份。

<div class="d-flex">
  <div class="box R" style="flex-grow: 2"></div>
  <div class="box G" style="flex-grow: 1"></div>
  <div class="w-box B"></div>
</div>

需要注意的是使用 flex-grow 因為元素會自動長胖到容器寬度，所以這時 justify-content 就不再有作用。

Flex-Shrink

flex-basis
flex-shrink
flex = flex-basis + flex-grow

Flex-Basis

align-self

應用

Navbar 左右分列項目。

<div class="nav">
  <div>Website Logo</div>
  <div>User</div>
</div>
.nav {
  display: flex;
  justify-content: space-between;
}

Card

<div class="card">
  <div></div>
  <div></div>
</div>
.card {
  display: flex;
}

Flexbox Application

Flex Demo | css.sdwh

flex Source Code | css.sdwh

參考資料

A Complete Guide to Flexbox

深入解析 CSS Flexbox

THE ULTIMATE FLEXBOX CHEAT SHEET

#F2E #CSS #Dev