搜尋

Flexbox 的對齊方式

在「認識彈性盒子 Flexbox」教學中已經了解彈性項目的排列方式，這篇教學會延續該篇教學，繼續介紹 Flexbox 對齊相關的樣式屬性，分別是 justify-content、align-items、align-self 和 align-content，透過對齊的樣式屬性，準確的掌握彈性項目的位置。

快速導覽：

CSS 教學 - Flexbox 的對齊方式

justify-content 水平對齊

justify-content 樣式屬性會設定「彈性項目的水平對齊方式」，這個樣式屬性寫在彈性容器上，撰寫樣式後，內部的彈性項目就會根據主軸 ( main axis )、主軸起始點 ( main start ) 和結束點 ( main end ) 進行對齊，可以參考「flex-direction 彈性元素方向」了解彈性容器的軸向。

CSS 教學 - 認識彈性盒子 Flexbox - Flexbox 軸向

justify-content 樣式屬性沒有繼承特性，具有下列幾種屬於 Flexbox 的屬性值 ( 其他未列出的屬性值屬於 Grid 顯示類型元素 )：

屬性值 說明
flex-start 水平對齊主軸的起始點 ( 預設值 )。
flex-end 水平對齊主軸的結束點。
center 水平對齊主軸中心點
space-between 水平分散對齊，第一個元素對齊主軸起始點，最後一個元素對齊主軸結束點，按照「元素數量 - 1」分配間距。
space-around 水平分散對齊，按照元素的數量分配間距，元素左右間距相同。
space-evenly 水平分散對齊，按照「元素數量 + 1」分配間距。

下方範例會展示六種屬性值對於彈性項目的水平對齊方式。

線上展示：https://codepen.io/oxxo/pen/LYKKJKO

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div></div>
<div class="f j5"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div></div>
<div class="f j6"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .f {
    width: 300px;
    height: 50px;
    border: 1px solid #000;
    display: flex;
    font-size: 24px;
    margin: 20px;
  }

  .j1 {justify-content: flex-start;}
  .j2 {justify-content: flex-end;}
  .j3 {justify-content: center;}
  .j4 {justify-content: space-between;}
  .j5 {justify-content: space-around;}
  .j6 {justify-content: space-evenly;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33;}
  div div:nth-child(2) {background: #fb0;}
  div div:nth-child(3) {background: #4cf;}
  div div:nth-child(4) {background: #0b0;}
</style>

CSS 教學 - Flexbox 的對齊方式 - justify-content 彈性項目水平對齊

如果設定 flex-wrap:wrap 彈性項目換行，換行後的彈性項目也會根據水平對齊的設定進行對齊，下圖是將 HTML 程式碼增加元素造成換行後的水平對齊樣貌。

線上展示：https://codepen.io/oxxo/pen/mdZZGZG

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>apple</div><div>banana</div><div>orange</div><div>papaya</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>apple</div><div>banana</div><div>orange</div><div>papaya</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>apple</div><div>banana</div><div>orange</div><div>papaya</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>apple</div><div>banana</div><div>orange</div><div>papaya</div></div>
<div class="f j5"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>apple</div><div>banana</div><div>orange</div><div>papaya</div></div>
<div class="f j6"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>apple</div><div>banana</div><div>orange</div><div>papaya</div></div>

<!-- CSS 程式碼 -->
<style>
  .f {
    width: 300px;
    height: 80px;
    border: 1px solid #000;
    display: flex;
    font-size: 16px;
    margin: 20px;
    flex-wrap: wrap;
  }

  .j1 {justify-content: flex-start;}
  .j2 {justify-content: flex-end;}
  .j3 {justify-content: center;}
  .j4 {justify-content: space-between;}
  .j5 {justify-content: space-around;}
  .j6 {justify-content: space-evenly;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33;}
  div div:nth-child(2) {background: #fb0;}
  div div:nth-child(3) {background: #4cf;}
  div div:nth-child(4) {background: #0b0;}
  div div:nth-child(5) {background: #f9f;}
  div div:nth-child(6) {background: #f80;}
  div div:nth-child(7) {background: #6f6;}
  div div:nth-child(8) {background: #ccc;}
</style>

CSS 教學 - Flexbox 的對齊方式 - justify-content 多行彈性項目水平對齊

align-items 單行垂直對齊

align-items 樣式屬性會設定「單行彈性的項目垂直對齊方式」，這個樣式屬性寫在彈性容器上，撰寫樣式後，內部的彈性項目就會在排列時根據交叉軸 ( cross axis )、交叉軸起始點 ( cross start ) 和結束點 ( cross end ) 進行對齊，align-items 樣式屬性沒有繼承特性，共有下列幾種屬性值 ( 其他未列出的屬性值屬於 Grid 顯示類型元素 )：

屬性值 說明
flex-start 每個元素上緣對齊交叉軸的起始點。
flex-end 每個元素下緣對齊交叉軸的結束點。
center 每個元素中線對齊交叉軸中心。
normal 在 Flexbox 彈性容器中等同 stretch ( 預設值 )。
stretch 未設定高度的元素高度會撐開至彈性容器高度，有設定高度的元素上緣對齊交叉軸的起始點。
baseline、first baseline 對齊每個元素的基線，對齊後最上緣對齊交叉軸的起始點。
last baseline 等同 baseline，對齊後最下緣對齊交叉軸的結束點。

下方範例會展示不同 align-items 屬性值的對齊方式，其中所有 div 字體大小都不同，而藍色和粉紅色的元素有特別設定高度，可觀察屬性值為 baseline 和 stretch 所呈現效果。

線上展示：https://codepen.io/oxxo/pen/PorrdrX

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j5"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j6"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .f {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    display: flex;
    font-size: 20px;
    margin: 20px;
  }

  .j1 {align-items: flex-start;}
  .j2 {align-items: flex-end;}
  .j3 {align-items: center;}
  .j4 {align-items: stretch;}
  .j5 {align-items: baseline;}
  .j6 {align-items: last baseline;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33; font-size: 30px;}
  div div:nth-child(2) {background: #fb0; font-size: 12px;}
  div div:nth-child(3) {background: #4cf; height: 60px;}
  div div:nth-child(4) {background: #0b0; font-size: 40px;}
  div div:nth-child(5) {background: #f9f; height: 30px;}
</style>

CSS 教學 - Flexbox 的對齊方式 - align-items 單行垂直對齊

屬性值 baseline 等同 first baseline，所有元素會在對齊 baseline 之後，最上緣對齊交叉軸的起始點，而 last baseline 剛好相反，會在對齊 baseline 之後，最下緣對齊交叉軸的結束點。

CSS 教學 - Flexbox 的對齊方式 - align-items:baseline 和 last baseline 差異

align-content 多行垂直對齊

如果設定 flex-wrap:wrap 彈性項目換行，就需要使用 align-content 控制「多行彈性項目的垂直對齊方式」，沒有繼承特性，內部的彈性項目就會在排列時根據交叉軸 ( cross axis )、交叉軸起始點 ( cross start ) 和結束點 ( cross end ) 進行對齊，通常設定這個樣式後，整行元素的高度會自動調整成最高元素的數值 ( 有設定高度的元素除外 )，這個樣式屬性有下列屬性值：

屬性值 說明
flex-start 第一行的每個元素上緣對齊交叉軸的起始點，換行的元素最上緣對齊上一行元素的底部。*
flex-end 最後一行的每個元素上緣對齊交叉軸的結束點，換行的元素最下緣對齊後一行元素的頂部。*
center 所有元素所構成的垂直中線，對齊交叉軸的中心點。*
normal 在 Flexbox 彈性容器中等同 stretch ( 預設值 )。
stretch 未設定高度的元素高度會自動撐開，撐開的高度根據該行元素的高度或字體自動調整。
space-between 垂直分散對齊，第一個元素對齊交叉軸起始點，最後一個元素對齊交叉軸結束點，按照「元素數量 - 1」分配間距。
space-around 垂直分散對齊，按照元素的數量分配間距，元素上下間距相同。
space-evenly 垂直分散對齊，按照「元素數量 + 1」分配間距。

下方範例會展示不同 align-content 屬性值的對齊方式，其中所有 div 字體大小都不同，部分 div 還有特別設定高度。

線上展示：https://codepen.io/oxxo/pen/jOjjvgO

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j5"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j6"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j7"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>

<!-- CSS 程式碼 -->
<style>
  .f {
    width: 220px;
    height: 250px;
    border: 1px solid #000;
    display: flex;
    font-size: 20px;
    margin: 20px 10px;
    flex-wrap: wrap;
  }

  .j1 {align-content: flex-start;}
  .j2 {align-content: flex-end;}
  .j3 {align-content: center;}
  .j4 {align-content: stretch;}
  .j5 {align-content: space-between;}
  .j6 {align-content: space-around;}
  .j7 {align-content: space-evenly;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33; font-size: 30px;}
  div div:nth-child(2) {background: #fb0; font-size: 12px;}
  div div:nth-child(3) {background: #4cf; height: 60px;}
  div div:nth-child(4) {background: #0b0; font-size: 40px;}
  div div:nth-child(5) {background: #f9f; height: 30px;}
  div div:nth-child(6) {background: #f80; font-size: 12px;}
  div div:nth-child(7) {background: #6f6; height: 30px;}
  div div:nth-child(8) {background: #ccc; font-size: 12px;}
</style>

CSS 教學 - Flexbox 的對齊方式 - align-content 多行垂直對齊

CSS 教學 - Flexbox 的對齊方式 - align-content 多行垂直對齊

align-self 覆寫單一元素垂直對齊方式

align-self 樣式屬性可「覆寫單一元素垂直對齊方式」，是撰寫在「彈性項目」的樣式屬性，設定後的彈性項目自成一格，不會被原本的垂直樣式影響，沒有繼承特性，屬性值和 align-items 相同。

屬性值 說明
flex-start 元素上緣對齊交叉軸的起始點。
flex-end 元素下緣對齊交叉軸的結束點。
center 元素中線對齊交叉軸中心。
normal 在 Flexbox 彈性容器中等同 stretch ( 預設值 )。
stretch 未設定高度的元素高度會撐開至彈性容器高度，有設定高度的元素上緣對齊交叉軸的起始點。
baseline、first baseline 有設定 align-self 的元素互相對齊彼此基線，對齊後最上緣對齊交叉軸的起始點。
last baseline 等同 baseline，對齊後最下緣對齊交叉軸的結束點。

下方範例會將橘黃色內容為 ox 的 div 額外添加 align-self 樣式屬性。

線上展示：https://codepen.io/oxxo/pen/ZEddMgO

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j5"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j6"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>

<!-- CSS 程式碼 -->
<style>
  .f {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    display: flex;
    font-size: 20px;
    margin: 10px;
  }

  .j1 {align-items: flex-start;}
  .j2 {align-items: flex-end;}
  .j3 {align-items: center;}
  .j4 {align-items: stretch;}
  .j5 {align-items: baseline;}
  .j6 {align-items: last baseline;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33; font-size: 30px;}
  div div:nth-child(2) {background: #fb0; font-size: 12px;}
  div div:nth-child(3) {background: #4cf; height: 60px;}
  div div:nth-child(4) {background: #0b0; font-size: 40px;}
  div div:nth-child(5) {background: #f9f; height: 30px;}

  .j1 div:nth-child(2){align-self: flex-end;}   /* 額外設定 align-self */
  .j2 div:nth-child(2){align-self: flex-start;} /* 額外設定 align-self */
  .j3 div:nth-child(2){align-self: flex-start;} /* 額外設定 align-self */
  .j4 div:nth-child(2){align-self: flex-start;} /* 額外設定 align-self */
  .j5 div:nth-child(2){align-self: flex-start;} /* 額外設定 align-self */
  .j6 div:nth-child(2){align-self: flex-start;} /* 額外設定 align-self */
</style>

CSS 教學 - Flexbox 的對齊方式 - align-self 覆寫單一元素垂直對齊方式

如果是 align-self 設定為 baseline 或 last baseline，具有相同屬性值的元素會「互相對齊彼此基線」，對齊後最上緣對齊交叉軸的起始點，可以觀察下方範例的第一個與第二個 div，彼此對齊基線後，因為第一個 div 比較高，就會使用第一個 div 的上緣去對齊交叉軸起始點。

線上展示：https://codepen.io/oxxo/pen/ExBBeqm

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div></div>


<!-- CSS 程式碼 -->
<style>
  .f {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    display: flex;
    font-size: 20px;
    margin: 10px;
  }

  .j1 {align-items: flex-start;}
  .j2 {align-items: flex-end;}
  .j3 {align-items: center;}
  .j4 {align-items: stretch;}
  .j5 {align-items: baseline;}
  .j6 {align-items: last baseline;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33; font-size: 30px;}
  div div:nth-child(2) {background: #fb0; font-size: 12px;}
  div div:nth-child(3) {background: #4cf; height: 60px;}
  div div:nth-child(4) {background: #0b0; font-size: 40px;}
  div div:nth-child(5) {background: #f9f; height: 30px;}

  .f div:nth-child(1), 
  .f div:nth-child(2){
    align-self: baseline;
  }
</style>

CSS 教學 - Flexbox 的對齊方式 - align-self: baseline 的對齊效果

如果是多行的狀況，單一元素的對齊會以「所在的行空間」為對齊標的，下方會將第二、第五和第八個 div 使用 align-self: flex-start，可以看出這三個元素都會對齊自己所處在行空間的上緣。

線上展示：https://codepen.io/oxxo/pen/xxooavL

<!-- HTML 程式碼-->
<div class="f j1"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j2"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j3"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j4"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j5"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j6"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>
<div class="f j7"><div>o</div><div>ox</div><div>oxx</div><div>oxxo</div><div>xxo</div><div>apple</div><div>banana</div><div>watermelon</div></div>

<!-- CSS 程式碼 -->
<style>
  .f {
    width: 220px;
    height: 220px;
    border: 1px solid #000;
    display: flex;
    font-size: 20px;
    margin: 10px;
    flex-wrap: wrap;
  }

  .j1 {align-content: flex-start;}
  .j2 {align-content: flex-end;}
  .j3 {align-content: center;}
  .j4 {align-content: stretch;}
  .j5 {align-content: space-between;}
  .j6 {align-content: space-around;}
  .j7 {align-content: space-evenly;}

  div div {
    padding: 5px 10px;
  }
  div div:nth-child(1) {background: #f33; font-size: 30px;}
  div div:nth-child(2) {background: #fb0; font-size: 12px;}
  div div:nth-child(3) {background: #4cf; height: 60px;}
  div div:nth-child(4) {background: #0b0; font-size: 40px;}
  div div:nth-child(5) {background: #f9f; height: 30px;}
  div div:nth-child(6) {background: #f80; font-size: 12px;}
  div div:nth-child(7) {background: #6f6; height: 30px;}
  div div:nth-child(8) {background: #ccc; font-size: 12px;}

  .f div:nth-child(2), 
  .f div:nth-child(5), 
  .f div:nth-child(8){
    align-self: flex-start;    /* 2、5、8 個 div 設定 align-self  */
  }
</style>

CSS 教學 - Flexbox 的對齊方式 - align-self 在多行元素的樣式行為

小結

使用 Flexbox 時，大部分的情況都會進行對齊的設定，透過這篇教學介紹的水平與垂直對齊方式，就能精確掌握彈性項目的位置，也能做出更好的彈性排版。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與函式

變數 數學計算 文字與清單計數 生成內容與引號 色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子 Flexbox 對齊方式