Flexbox 的對齊方式

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

延伸閱讀：認識彈性盒子 Flexbox、Flexbox 的彈性伸縮

快速導覽：

• justify-content 水平對齊
• align-items 單行垂直對齊
• align-content 多行垂直對齊
• align-self 覆寫單一元素垂直對齊方式

justify-content 水平對齊

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

justify-content 樣式屬性沒有繼承特性，具有下列幾種屬於 Flexbox 的屬性值：

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

線上展示：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>

如果設定 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>

align-items 單行垂直對齊

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

下方範例會展示不同 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>

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

align-content 多行垂直對齊

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

下方範例會展示不同 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>

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

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

下方範例會將橘黃色內容為 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>

如果是 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>

如果是多行的狀況，單一元素的對齊會以「所在的行空間」為對齊標的，下方會將第二、第五和第八個 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>

小結

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

延伸閱讀：認識彈性盒子 Flexbox、Flexbox 的彈性伸縮

意見回饋

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