Flexbox align-content spacebetween 不起作用答案

【问题标题】：Flexbox align-content spacebetween not workingFlexbox align-content spacebetween 不起作用
【发布时间】：2019-03-19 00:31:35
【问题描述】：

所以我要做的是让 3 个 div 垂直对齐为顶部的第一个，中间的第二个，底部的第三个。

我的 HTML：

<div class="d-flex flex-column align-content-spacebetween" style="height:100%;">
  <div></div>
  <div></div>
  <div></div>
</div>

为什么这不起作用？它们在顶部对齐，在另一个下方。

【问题讨论】：

所以我认为您正在使用引导程序 4..？！我认为这些类是 justify-content-between 或 align-items-center。 getbootstrap.com/docs/4.0/utilities/flex
@GabbrIssimo 感谢“justify-content-between”的工作。

标签： html twitter-bootstrap css flexbox

【解决方案1】：

由于你没有分享你的 css 代码，所以很难说，但这里有一个使用 flex 的示例

.align-content-spacebetween{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.align-content-spacebetween div{
  border: 1px solid black;
  text-align: center;
  height: 50px;
}

<div class="align-content-spacebetween">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

【讨论】：