以不同方式对齐多个弹性框项目[重复]

Question

我有一个 div，里面有两个项目。我将它们放在一列中，需要第一项证明：中心，第二项证明：flex-end。我该怎么做？

HTML：

<div class="wrapper wrapper--login">
   <h1 class="wrapper--login__title">
      Demo or Die
   </h1>
   <a class="btn wrapper--login__btn" href="#">
      Log in
   </a>
</div>

css:

.wrapper--login{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Answer 1

包装器需要一个高度和标题margin: auto 0

注意，这将使项目在可用空间左侧（容器减去底部元素）居中，而不是在容器的中心。

要将其相对于容器居中，请查看以下帖子：

• center-and-bottom-align-flex-items
• center-and-right-align-flexbox-elements

.wrapper--login{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 200px;
}

.wrapper--login__title {
  margin: auto 0;
}

<div class="wrapper wrapper--login">
   <h1 class="wrapper--login__title">
      Demo or Die
   </h1>
   <a class="btn wrapper--login__btn" href="#">
      Log in
   </a>
</div>