flexbox 的垂直对齐 CSS

Question

我正在尝试实现以下代码的垂直对齐。但是，当我尝试添加 flex-direction: column，并将 margin-left 更改为 margin-top 时，“三”和“四”之间的间距根本不起作用。谁能赐教一下？

在我更改为垂直弹性列方向之前：

<div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div class="push">Four</div>
        <div>Five</div>
      </div>

.box {
  display: flex;
}
.push {
    margin-left: auto;
}

添加 flex-direction: 列后，将 margin-left 更改为 margin-top:

.box {
    display: flex;
    flex-direction: column;
  }
.push {
    margin-top: auto;
}

Answer 1

你没有得到间距，因为高度已经是最大值。如果你想使用 margin-auto，你必须有更多 space 的盒子。在下图中，您可以看到绿色框是包装纸，它具有最大高度。一旦你改变你的高度，盒子就会起作用。

flexbox 的垂直对齐 CSS

Vertical alignment for flexbox CSS

html

css

flexbox