Как с помощью flex-box, один контейнер оставить по центру а второй прижать к полу

Всем привет, хороших выходных. Ребя, чет торможу жуть, вчера весь вечер промчался. Ну можно же через margin-top: auto; - прижать элемент к полу. Но у меня такая история. (Вот ссылка на пример: https://codepen.io/pipskvik/pen/rNOarxb). HTML:

<main>
  <div class="wrap">
    <div class="block1">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
    <div class="block2">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
  </div>
</main>

CSS:

.wrap {
  width: 1000px;
  min-height: 100vh;
  background-color: #999fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block1 {
  width: 300px;
  height: 100px;
  background-color: salmon;
  margin: 10px;
}

.block2 {
  width: 300px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

У меня есть страничка, во весь вьюпорт фотка - это мэйн контейнер. Далее идет 2 блока, 1- заголовок, который должен быть по центру, а внизу кнопочки слайдера. Ну и как-то можно flexom оставить заголовок по центру, а кнопоньки с каким-то отступом прижать в низу?) Буду рад помощи)))


Ответы (1 шт):

Автор решения: MaximLensky

смотреть на весь экран

.wrap {
  width: 1000px;
  min-height: 100vh;
  background-color: #999fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.block1 {
  width: 300px;
  height: 100px;
  background-color: salmon;
  align-content: center;
  margin: auto;
}

.block2 {
  width: 300px;
  height: 100px;
  background-color: red;
  align-content: flex-end;
}
<main>
  <div class="wrap">
    <div class="block1">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
    <div class="block2">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
  </div>
</main>

→ Ссылка