Укладка div с flex

Question

У меня есть следующий код, который центрирует мой контент по вертикали

HTML

<div class="titleHide flex">
   <h4>...</h4>
   <h1>...</h1>
</div>

CSS

.titleHide {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background-color: rgba(209,30,93,0.8);
}

.flex {
display: flex;
flex: 1;
align-items: center;
}

.flex используется другими div'ами на моем сайте. Однако в этом случае он совмещает заголовки h1 и h4 рядом друг с другом, я хочу, чтобы они располагались друг над другом.

Answer 1

Вы можете написать отдельный класс CSS для этого, скажем:

.flex-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.flex,
.flex-stack {
  display: flex;
  flex: 1;
  align-items: center;
}

.flex-stack {
  flex-direction: column;
}

.module-1,
.module-2 {
  margin: 1em;
}

<h3>Flex Inline</h3>

<div class="flex">
  <div class="module-1">
    Module #1
  </div>
  <div class="module-2">
    Module #2
  </div>
</div>

<h3>Flex Stacked</h3>

<div class="flex-stack">
  <div class="module-1">
    Module #1
  </div>
  <div class="module-2">
    Module #2
  </div>
</div>

Надеюсь, это было полезно. Ура!