如何让Flexbox容器内的元素垂直堆叠排列？

你的.box容器使用了Flex布局，但Flex默认的排列方向是水平（row），所以内部的图片、标题和段落会横向排列。只需给.box添加flex-direction: column，就能让元素垂直堆叠，再根据需求调整对齐方式即可。

修改后的CSS代码：

.container {
  display: flex;
  height: 1000px;
  width: 1000px;
  background-color: bisque;
  align-items: center;
  justify-content: center;
}

.box {
  height: 300px;
  width: 400px;
  background-color: green;
  display: flex;
  flex-direction: column; /* 关键：设置垂直排列 */
  align-items: center; /* 水平方向居中 */
  justify-content: center; /* 垂直方向居中 */
  padding: 10px; /* 可选：添加内边距避免内容贴边 */
  overflow: auto; /* 可选：内容超出时显示滚动条 */
}

.box img {
  max-width: 100px; /* 可选：限制图片宽度，避免超出盒子 */
  margin-bottom: 10px; /* 可选：给图片下方添加间距 */
}

对应的HTML代码：

<div class="container">
  <div class="box">
    <img src="Marcel_Proust.jpg" alt="Marcel Proust">
    <h2>Proust'un Gölgesinde</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore tenetur a ipsam distinctio dicta debitis quaerat reiciendis nihil quae. Veritatis sit dolorem praesentium dolorum accusantium blanditiis quae a odio in?</p>
  </div>
</div>

补充说明：

• flex-direction: column：将Flex容器的主轴方向改为垂直，元素会沿垂直方向依次排列。
• 可选的样式调整：添加内边距、图片尺寸限制和元素间距，能让布局更美观；如果内容超出盒子高度，overflow: auto可以显示滚动条，避免内容溢出。

内容的提问来源于stack exchange，提问作者Emre Oral