css - 以不同的方式对齐多个 flexbox 元素

Question

这个问题在这里已经有了答案:





Center and bottom-align flex items

(3 个回答)


4年前关闭。




我有一个 div，里面有两个元素。我将它们放在一列中，需要第一个对齐的元素:center 和第二个对齐的元素: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>