頂部對齊

css

.align-start {
  display: flex;
  align-items: flex-start;
  /*在交叉軸方向（預設是垂直方向），讓子元素都靠上對齊*/
  height: 100px;
}

html

<div class="align-start">
  <div>上對齊</div>
  <div>上對齊</div>
  <div>上對齊</div>
</div>

底部對齊

css

.align-end {
  display: flex;             /* 啟用 Flexbox 排版 */
  align-items: flex-end;     /* 子元素在交叉軸的尾端對齊 (靠下) */
  height: 100px;             /* 父容器高度固定為 100px */
}

html

<div class="align-end">
  <div>下對齊</div>
  <div>下對齊</div>
  <div>下對齊</div>
</div>