如何在不将flex-direction改为column时，用flexbox实现文字居图片下方

要实现文字在对应图片下方，且不修改外层flex容器的flex-direction: row，核心思路是把图片和对应标题打包成独立的flex子项，让每个子项内部自行控制排版逻辑。

1. 修改HTML结构 #

将需要配对的图片和标题放进同一个容器（比如div.img-item），这样外层flex容器会把每个容器当作一个独立的横向排列单元：

<div class="img-totm">
  <div class="img-item">
    <img src="images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
    <h2>Fall Berry Blitz Tea</h2>
  </div>
  <div class="img-item">
    <img src="images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
    <h2>Spiced Rum Tea</h2>
  </div>
  <div class="img-item">
    <img src="images/img-donut.jpg" alt="Donut Tea">
    <h2>Donut Tea</h2>
  </div>
  <div class="img-item">
    <img src="images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
    <h2>Myrtle Ave Tea</h2>
  </div>
  <div class="img-item">
    <img src="images/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
    <h2>Bedford Bizarre Tea</h2>
  </div>
</div>

2. 调整CSS样式 #

给每个子项容器设置内部纵向排版，同时优化外层容器和子元素的间距：

.img-totm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* 用gap替代padding，更灵活控制子项间的横向间距 */
}

.img-item {
  display: flex;
  flex-direction: column; /* 子项内部纵向排列，标题自然落在图片下方 */
  align-items: center; /* 让图片和标题居中对齐，可选 */
}

.img-totm img {
  height: 300px;
  width: 400px;
  margin-bottom: 10px; /* 控制图片和标题之间的纵向间距 */
}

.img-totm h2 {
  margin: 0; /* 清除标题默认边距，避免多余空白 */
  text-align: center; /* 让文字居中，可选 */
}

逻辑说明 #

外层.img-totm保持flex-direction: row的横向排版规则，每个.img-item作为独立的flex子元素存在；子元素内部通过flex-direction: column实现图片在上、标题在下的布局，既保留了外层横向排列的需求，又完成了图片与标题的配对展示。

内容的提问来源于stack exchange，提问作者Kristian Kiselkov