以不同方式对齐多个 Flexbox 项目

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

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

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

• 中心和底部对齐弹性项目
• 居中右对齐 Flexbox 元素

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