CSS-4: Flexbox佈局全解析

更新於 2025/03/02發佈於 2025/03/02閱讀時間約 8 分鐘

Flexbox佈局

它是一種廣受歡迎的佈局技術，使用方式為在 HTML 的父元素當中，寫入 display:flex 這行語法，即能夠讓子元素產生各種排列的方式。

現在考慮以下程式碼:

<div class="container">
  <div class="box box1">First</div>
  <div class="box box2">Second</div>
  <div class="box box3">Third</div>
</div>

.container {
  background-color: yellow;
}
.box {
  font-weight: bold;
}
.box1 {
  background-color: #FF0000;
}

.box2 {
  background-color: #00FF00;
}

.box3 {
  background-color: #00FFFF; 
}

呈現效果:

此時我們寫入那行語法。

.container {
  background-color: yellow;
  display: flex;
}

呈現效果:

透過使用gap屬性一次在所有 Flex 項目之間新增空間:

.container {
  background-color: yellow;
  display: flex;
  gap: 10px;
}

呈現效果:

預設情況下，子元素的排列方式呈水平，因為flex-direction: 屬性的預設值為row

我們一一更改排列方向:

.container {
  background-color: yellow;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

呈現效果:

好，此時子元素皆佔據了整行螢幕，視覺效果不好，稍微修改一下:

.box {
  font-weight: bold;
  height: 60px;
  width: 60px;
  text-align: center;
}

呈現效果:

好，接下來我們再改變一下父容器的內邊距，並且讓排列方向再次呈水平排列。

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
}

呈現效果:

好，接著我們要使用justify-content屬性，其根據項目對齊方式動態分配空間。其設定方式我們下面一一示範:

flex-start

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
  justify-content: flex-start;
}

呈現效果:

flex-end

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
  justify-content: flex-end;
}

呈現效果:

center

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
  justify-content: center;
}

呈現效果:

space-between，均勻分配項目，第一個項目在開始位置，最後一個項目在結束位置。

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
  justify-content: space-between;
}

呈現效果:

space-around，在項目之間分配相等的空間。小方塊與父容器之間的間隔是小方塊彼此間隔的一半。

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
  justify-content: space-around;
}

呈現效果:

space-evenly每個小方塊之間和與父容器之間擁有相同的間隔。

.container {
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:6px;
  flex-direction: row;
  justify-content: space-evenly;
}

呈現效果:

這邊讀者可以將flex-direction: 設定為row-reverse ，關查一下效果。效果應該為 (主軸呈橫向，但反序排列)。
對於flex-direction: column;概念相同，不過要先對父容器設定一個易於測試的高度。

好，接下來要講align-items屬性，即交叉軸的對齊方式。

在測試之前，我們稍微修改一下 CSS 的設定，讓我們更好觀察效果:

.container {
  width: 300px;
  height: 140px;
  padding: 10px;
  background-color: yellow;
  display: flex;
  gap:10px;
  flex-direction: row;
  align-items: flex-start; /* 請自行更換 */
.box {
  font-weight: bold;
}
.box1 {
  background-color: #FF0000;
  height: 50px;
}

.box2 {
  background-color: #00FF00;
  height: 90px;
}

.box3 {
  background-color: #00FFFF; 
  height: 30px;
}

flex-start

呈現效果:

flex-end

呈現效果:

center

呈現效果:

baseline，對齊內容物的文字基線，請讀者個別設定每格子元素容器的行高再做測試:

.box1 {
  background-color: #FF0000;
  height: 50px;
  line-height: 50px;
}

.box2 {
  background-color: #00FF00;
  height: 90px;
  line-height: 30px;
}

.box3 {
  background-color: #00FFFF; 
  height: 30px;
  line-height: 40px;
}

呈現效果:

stretch，若小方塊不設定寬、高、間距，則充滿整個容器。請記得去掉小方塊個別設定的值。保留背景顏色即可。

好，最後我們再提一個東西:inline-flex，設定成inline-flex 可以讓 Flexbox 僅佔據其內容所需的寬度，而不是拉伸整個寬度。

.container {
  padding: 10px;
  height: 200px;
  background-color: yellow;
  display: inline-flex;
}

.box {
  font-weight: bold;
  padding: 10px;
  height: 100px;
}

.box1 {
  background-color: #FF0000;
}

.box2 {
  background-color: #00FF00;
}

.box3 {
  background-color: #00FFFF; 
}