Flex 对齐方式

在“认识弹性盒子 Flexbox”教学中已经了解弹性项目的排列方式，这篇教学会延续该篇教学，继续介绍 Flex 对齐相关的样式属性，分别是 justify-content、align-items、align-self 和 align-content，透过对齐的样式属性，准确的掌握弹性项目的位置。

• 相关文章：认识弹性盒子 Flexbox、Flex 的弹性伸缩
• 延伸阅读：CSS 水平置中技巧、CSS 垂直置中技巧

快速导览：

• justify-content 水平对齐
• align-items 单行垂直对齐
• align-content 多行垂直对齐
• align-self 覆写单一元素垂直对齐方式
• place-content 对齐缩写格式

justify-content 水平对齐

justify-content 样式属性会设定“弹性项目的水平对齐方式”，这个样式属性写在弹性容器上，撰写样式后，内部的弹性项目就会根据主轴 ( main axis )、主轴起始点 ( main start ) 和结束点 ( main end ) 进行对齐，可以参考“flex-direction 弹性元素方向”了解弹性容器的轴向。

justify-content 样式属性没有继承特性，具有下列几种属于 Flex 的属性值：

下方范例会展示六种属性值对于弹性项目的水平对齐方式。

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

place-content 对齐缩写格式

place-content 是 align-content 和 justify-content 的缩写格式，属性值有两个，位于第一个的属性值是 align-content，第二个是 justify-content，如果只设定一个值，则第二个值与第一个值相同，如果其中一个属性值写错了发生无效的状况，则这个样式属性就没有作用。

下方范例中，独立撰写 align-content 和 justify-content 样式属性，与使用 place-content 样式属性所呈现的结果一模一样。

线上展示：https://codepen.io/oxxo/pen/LEPJEzY

<!-- 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: 200px;
    height: 200px;
    border: 1px solid #000;
    display: flex;
    font-size: 16px;
    margin: 20px;
    flex-wrap: wrap;
    float: left;
  }
  .j1 {
    justify-content: flex-start;
    align-content: center;
  }
  .j2 {
    justify-content: flex-end;
    align-content: stretch;
  }
  .j3 {
    justify-content: space-between;
    align-content: space-between;
  }
  .j4 {place-content: center flex-start;}
  .j5 {place-content: stretch flex-end;}
  .j6 {place-content: space-between;}

  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>

小结

使用 Flex 进行排版时时，大部分的情况都会进行对齐的设定，透过这篇教学介绍的水平与垂直对齐方式，就能精确掌握弹性项目的位置，也能做出更好的弹性排版。

• 相关文章：认识弹性盒子 Flexbox、Flex 的弹性伸缩
• 延伸阅读：CSS 水平置中技巧、CSS 垂直置中技巧

意见反馈