展示Flex Center＆amp;底部

Question

我正在尝试创建一个完整的高度标题，并在底部有一个元素中心和另一个元素。

我一直使用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，虽然如果有人能指出我在本地flex的方向，那也会很棒。

Answer 1

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

• 将flex-direction的{​​{1}}设置为.full-header。这将从上到下订购孩子column
• 将自动顶部和底部div添加到margin。这样可以确保.align-item-center的顶部和底部margin自动延伸以占用.align-item-center
中的可用空间

＆＃13;

＆＃13;

.full-header

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;