顶部和底部儿童的弹性方向列反向

Question

我尝试使用 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>

Answer 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>

Answer 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>

flex direction column reverse for top and bottom children