方向控制：flex-direction

決定項目的排列方向

• 水平排列（預設）:

.flex-row {
  display: flex;/* 啟用 Flexbox 排版 */
  flex-direction: row;/* 主軸方向設為橫向 (從左到右) */
}

html

<div class="flex-row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

• 水平反向排列 :

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

html

<div class="flex-row-reverse">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

垂直排列:

.flex-column {
  display: flex;
  flex-direction: column;
}

html

<div class="flex-column">
  <div>第一行</div>
  <div>第二行</div>
  <div>第三行</div>
</div>

垂直反向排列 :

.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

html

<div class="flex-column-reverse">
  <div>第一行</div>
  <div>第二行</div>
  <div>第三行</div>
</div>