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

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

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

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

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

1 个答案: