顶部和底部子项的 flex 方向列反转答案

【问题标题】：flex direction column reverse for top and bottom children顶部和底部子项的 flex 方向列反转
【发布时间】：2022-01-26 08:43:05
【问题描述】：

我尝试使用 flex-direction: column-reverse 进行此布局，其中按钮 1 和按钮 2 的顺序在不更改 html 的情况下交换：

<button>2</button>
<button>1</button>

但我不能应用 flex，因为它变成了 1 班轮。

.flex {
   display: flex;
}

button {
   width: 100%;
}

.wrap {
   width: 200px;
}

<div class="wrap">
   <div class="flex">
      <button>2</button>
      <button>1</button>
   </div>
</div>

【问题讨论】：

【解决方案1】：

您需要为 flexbox 添加flex-direction 以使其元素垂直对齐。默认情况下，它水平排列它们。使用column-reverse，元素垂直排列倒序

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

button {
   width: 100%;
}

.wrap {
   width: 200px;
}

<div class="wrap">
   <div class="flex">
      <button>2</button>
      <button>1</button>
   </div>
</div>

【讨论】：

【解决方案2】：

弹性容器中的默认设置是flex-direction: row，这意味着项目将排成一行。

如果您希望项目垂直堆叠（在一列中），请将 flex-direction: column 或 column-reverse 添加到容器中。

.flex {
  display: flex;
  flex-direction: column-reverse; /* new */
}

button {
  width: 100%;
}

.wrap {
  width: 200px;
}

<div class="wrap">
  <div class="flex">
    <button>2</button>
    <button>1</button>
  </div>
</div>

【讨论】：