css - 显示Flex中心和底部

我正在尝试创建一个全高的标头，并在其中一个元素的中心和另一个元素的底部。

我一直使用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的方向，那也很棒。

最佳答案

您可以通过执行以下操作来实现：


将flex-direction的.full-header设置为column。这将使子div从上到下排序
在margin中自动添加顶部和底部.align-item-center。这将确保margin的顶部和底部.align-item-center将自动扩展以占用.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>