靠左對齊（預設）

css

.justify-start {
  display: flex;
  justify-content: flex-start;
  /*子元素會靠 主軸的起點對齊*/
}

html

<div class="justify-start">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

靠右對齊

css

.justify-end {
  display:flex;
  justify-content: flex-end;
  /* 子元素靠主軸的尾端對齊 */
}

html

<div class="justify-end">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

居中對齊

css

.justify-center {
  display: flex;
  justify-content: center;
  /* 子元素在主軸方向置中 */
}

html

<div class="justify-center">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

兩端對齊

css

.justify-between {
  display: flex;
  justify-content: space-between;
}

html

<div class="justify-between">
  <div>左</div>
  <div>中</div>
  <div>右</div>
</div>

平均分散

css

.justify-around {
  display: flex;
  justify-content: space-around;
  /* 子元素平均分布，左右兩邊也有空隙 */
}

html

<div class="justify-around">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

等距分散

css

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
  /* 子元素平均分布，包含最外側 */
}

html

<div class="justify-evenly">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>