css - 显示 flex 和垂直居中对齐，而不并排移动内容？

Question

假设我将这个元素居中对齐，但我不想并排堆叠。我希望“关于我们”标题在段落上方对齐，而不是并排放置。有没有办法将这些内容对齐到中心，但仍然使用 flex box 作为其调整方式？

所以它应该喜欢...

About Us
Paragraph. 

不像...

About us Paragraph

flex box 可以在不将内容相互移动的情况下做到这一点吗？我知道这就是 flex box 的目的。

.list {
  float:left;
  height: 250px;
  background-color: blue;
  width: 50%;
  margin: 15px;
}

.about {
  display: flex;
  align-items: center;
  height: 250px;
]

<div class="list">
  <img class="img-fluid rounded" src="some/image" alt="">
  <img class="img-fluid rounded" src="some/image" alt="">
</div>
<div class="about">
  <h2 class="mb-4 header-main">About Us text</h2>
  <p>Some text here</p>
</div>

Answer 1

更改 direction到专栏:

.list {
  float:left;
  height: 250px;
  background-color: blue;
  width: 50%;
  margin: 15px;
}

.about {
  display: flex;
  flex-direction:column;
  justify-content: center;
  height: 250px;
]

<div class="list">
  <img class="img-fluid rounded" src="some/image" alt="">
  <img class="img-fluid rounded" src="some/image" alt="">
</div>
<div class="about">
  <h2 class="mb-4 header-main">About Us text</h2>
  <p>Some text here</p>
</div>