Question

我有一个弹性容器.container和两个弹性项：item-one和item-two。我想垂直居中第一个项目，并将第二个项目粘在底部。

我不知道如何在此上下文中垂直对齐第一项。

HTML：

<div class="container">
  <div class="item-one">Item One</div>
  <div class="item-two">Item Two</div>
</div>

CSS：

html, body {
  height: 100%;
  margin: 0;
}

.container {
  width: 500px;
  margin: 0 auto;
  border: 5px solid orange;
  height: 100%;

  /* Flex properties */
  display: flex;
  flex-wrap: wrap;  
  align-items: center;
  justify-content: center;
}

.item-one {
  border: 5px solid yellow;
  flex-basis: 500px;    
}

.item-two {
  border: 5px solid red;
  align-self: flex-end;
}

CodePen

Answer 1

您可以使用auto margins来对齐这样的元素。这将允许您在auto边距的方向上分配任何正空闲空间。

在这种情况下，您可以将flex-direction更改为column，以使Flexbox项目垂直流动。然后，您可以在第一个Flexbox项目上设置margin-top: auto / margin-bottom: auto，以便将其垂直居中，并确保其上方和下方的空间相等。这样做会将第二项推到底部：

Updated Example

html, body {
  height: 100%;
  margin: 0;
}
.container {
  width: 500px;
  margin: 0 auto;
  border: 5px solid orange;
  height: 100%;
  display: flex;
  flex-direction: column
}
.item-one {
  border: 5px solid yellow;
  margin: auto 0;
}
.item-two {
  border: 5px solid red;
  margin: 0 auto;
}

<div class="container">
  <div class="item-one">Item One</div>
  <div class="item-two">Item Two</div>
</div>

垂直对齐两个弹性项目

1 个答案: