個別對齊：align-self

css

.special-item {
  align-self: flex-end;
  /*把這個 .special-item 元素，在父容器（使用 flex 排版）的垂直方向，對齊到「下方」（也就是交叉軸的底部）。*/
}

html

<div style="display: flex; height: 100px;">
  <div>項目</div>
  <div class="special-item">特殊</div>
  <div>項目</div>
</div>

伸縮比例：flex

css

.flex-grow-1 {
  flex: 1;
}

.flex-grow-2 {
  flex: 2;
}

html

<div style="display: flex;">
  <div class="flex-grow-1">1 份</div>
  <div class="flex-grow-2">2 份</div>
  <div class="flex-grow-1">1 份</div>
</div>