仅使用Flexbox实现文字在图片下方换行的技术问题求助

嘿，我看了你的代码，问题其实很明确——你给外层的.flex-container加了Flex布局，但每个包含图片和文字的.flex-wrap容器没设置垂直方向的Flex布局！默认情况下Flex容器是横向排列（flex-direction: row），所以图片和文字会挤在一行，自然没法让文字跑到图片下面去~

问题根源 #

你现在的.flex-wrap只是个普通div，里面的img和.text元素默认是流式布局，但外层.flex-container的Flex特性会让.flex-wrap被压缩，导致文字没法换行。而你用text-align: center能让图片对齐，是因为图片作为替换元素，会继承父容器的文本对齐属性，这其实是个“歪打正着”的效果，不是Flex布局的正确用法哦。

解决方案 #

只需要给.flex-wrap添加Flex布局，并设置为垂直方向排列，同时让内部元素居中对齐：

.flex-wrap {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让图片和文字在容器内水平居中 */
  width: 100px; /* 可选：限制容器宽度，让文字在固定宽度内换行 */
}

.text {
  text-align: center; /* 可选：让文字本身居中，更美观 */
  margin-top: 8px; /* 可选：给图片和文字加一点间距 */
}

再调整一下.flex-container的样式，去掉不需要的属性（用Flex的原生对齐更规范）：

.flex-container {
  display: flex;
  justify-content: center;
  gap: 52px;
  /* 去掉flex:1，它在块级容器上作用不大 */
}

修改后的完整CSS #

body { 
  font-family: 'Courier New', Courier, monospace; 
}

.flex-container { 
  display: flex; 
  justify-content: center; 
  gap: 52px; 
}

.flex-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

img { 
  width: 100px; 
  height: 100px; 
}

.title { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding-bottom: 32px; 
  font-size: 36px; 
  font-weight: 900; 
}

.text {
  text-align: center;
  margin-top: 8px;
}

这样修改后，每个图片都会稳稳地在文字上方，文字会根据.flex-wrap的宽度自动换行，完美实现你想要的效果~

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