Дисплей Flex Center & Bottom

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, хотя, если кто-то может указать мне в направлении нативной гибкости, это также было бы здорово.

Answer 1

Этого можно добиться, выполнив следующие действия:

• Установите flex-direction из .full-header в column.Это упорядочит дочерние элементы div s сверху вниз
• Добавьте автоматическую верхнюю и нижнюю 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>