如何让图片自适应收缩至Flex布局的12.5%列宽？

你的问题出在三个核心点上：

• flex-basis属性加错了位置，应该给每个列项（.flex-img）设置，而非容器.flex-grid
• .flex-img的CSS语法错误，max-width缺少冒号，导致样式完全不生效
• 未给图片本身设置宽度约束，图片会保持原始尺寸，不会自动适配父容器

下面是修正后的完整方案：

修正后的CSS代码 #

.container {
  max-width: 80%;
}

.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

.flex-img {
  flex: 0 0 12.5%; /* 固定列宽：不放大、不缩小、基准宽度12.5% */
  box-sizing: border-box; /* 让padding包含在宽度内，避免列宽溢出 */
  padding: 10px;
}

.flex-img img {
  width: 100%; /* 强制图片占满父容器宽度 */
  max-width: 100%; /* 确保图片不会超出父容器 */
  height: auto; /* 保持图片原有比例 */
}

对应的HTML结构（无需修改） #

<div class="container">
  <div class="flex-grid">
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/350"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
    <div class="flex-img">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
    </div>
  </div>
</div>

关键说明： #

• flex: 0 0 12.5% 是flex-grow: 0、flex-shrink: 0、flex-basis: 12.5%的简写，确保每个列项固定宽度，不会被拉伸或压缩，8个元素刚好占满一行后自动换行
• box-sizing: border-box 解决了padding导致列宽超出12.5%的问题，让padding包含在列宽内
• 给图片设置width:100%是核心，强制图片适配父容器的宽度，height:auto保证图片比例不变

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