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>

在中间显示柔韧性和垂直对齐，而不同时移动内容吗？

1 个答案: