css - 显示 Flex 中心和底部

Question

我正在尝试创建一个全高 header ，其中一个元素居中，另一个元素位于底部。

我一直使用 position: absolute; 来做到这一点，但我想改用 flex。

.full-header {
  background-color: green;
  display: flex;
}

.align-item-center {
  background-color: blue;
}

.align-item-end {
  background-color: red;
}

<div class="container full-header">
  <div class="align-item-center">
    Row 1
  </div>
  <div class="align-item-end">
    Row 2
  </div>
</div>

我附上了一张图表来帮助传达我正在尝试做的事情。我也在使用 bootstrap 4，不过如果有人能指出我使用 native flex 的方向，那也很好。

Answer 1

您可以通过执行以下操作实现此目的:

• 将.full-header的flex-direction设置为column。这将从上到下排列子 div
• 向 .align-item-center 添加自动顶部和底部 margin。这将确保 .align-item-center 的顶部和底部 margin 将自动扩展以占据 .full-header 中的可用空间>

body {
  margin: 0;
}

.full-header {
  background-color: green;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.align-item-center {
  background-color: blue;
  margin: auto 0;
}

.align-item-end {
  background-color: red;
}

<div class="container full-header">
  <div class="align-item-center">
    Row 1
  </div>
  <div class="align-item-end">
    Row 2
  </div>
</div>