如何用Flexbox实现文本与两侧垂直图片的水平对齐？

看起来你是想实现「左侧三张垂直图 + 中间文本 + 右侧三张垂直图」的水平排列，但遇到了图片变形、元素间距异常的问题，咱们一步步来解决：

问题根源拆解 #

1. 图片尺寸莫名缩小：你给.image > img设了width:20%，这个百分比是相对于父容器.image的宽度的。而.image作为flex容器（.flex）的子元素，默认会根据剩余空间自动收缩，导致图片被挤压变形。
2. 元素间出现多余空白：flex容器的子元素默认有flex-shrink:1的属性，会自动压缩自身宽度来适应容器，再加上.text设置了固定的35em宽度，左右的图片容器被压缩后，可能出现视觉上的空白；另外浏览器默认的margin/padding也可能影响布局。

修正后的完整代码 #

CSS部分 #

/* 父flex容器：控制整体水平排列，靠左对齐 */
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start; /* 让所有元素顶部对齐，避免文本过长时图片被拉伸 */
}

/* 文本容器：固定宽度，防止被压缩，同时和图片保持间距 */
.text {
  font-family: 'font', cursive;
  font-size: 18px;
  text-align: left;
  width: 35em;
  flex-shrink: 0; /* 禁止文本容器被压缩 */
  margin: 0 20px; /* 文本与左右图片的间距，可按需调整 */
}

/* 图片容器：固定宽度，保证图片有足够空间，垂直排列图片 */
.image {
  display: flex;
  flex-direction: column;
  width: 120px; /* 固定容器宽度，和图片尺寸匹配 */
  gap: 10px; /* 垂直图片之间的间距，比margin更简洁 */
}

/* 图片样式：填满容器，保持宽高比 */
.image > img {
  width: 100%;
  height: auto;
  max-width: 120px; /* 限制图片最大宽度，避免过大 */
}

HTML部分（无需修改，保持原结构即可） #

<div class="flex">
  <div class='image'>
    <img src='image.jpg'>
    <img src='image.jpg'>
    <img src='image.jpg'>
  </div>
  <div class='text'>
    <p>text <br><br>text <br><br>text <br><br>text</p>
  </div>
  <div class='image'>
    <img src='image.jpg'>
    <img src='image.jpg'>
    <img src='image.jpg'>
  </div>
</div>

关键修改说明 #

• 给.image设置固定宽度，避免flex容器压缩它的空间，保证图片有足够的展示区域；
• 把图片的width:20%改成width:100%，让图片填满父容器，同时用height:auto保持宽高比；
• 给.text添加flex-shrink:0，防止文本容器被压缩变形；
• 用gap属性给垂直排列的图片添加间距，布局更整洁；
• 显式设置justify-content: flex-start确保所有元素靠左对齐，没有多余空白。

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