Flexbox中图片百分比尺寸失效问题及垂直对齐咨询

这问题我之前也碰到过，其实是flex布局的默认行为在搞鬼！

核心原因 #

当你把父div设置为display: flex后，里面的<img>和<p>都会变成flex item，而flex item的几个默认属性会直接影响你的图片宽度设置：

• flex-shrink: 1：这是flex item的默认值，意思是当flex容器空间不足时，item会自动缩小以适应容器。你给图片设的width:70%会被这个属性覆盖，图片会被压缩到能放下内容的最小尺寸。
• 百分比宽度的参照逻辑变化：普通块级元素的百分比宽度是严格相对于父容器宽度计算的，但flex item在没有明确约束的情况下，宽度计算会优先遵循flex布局的规则（比如flex-basis、flex-shrink/flex-grow），而不是单纯的父容器百分比。

解决方法 #

你可以通过以下几种方式修复这个问题：

方法1：禁止图片被压缩 #

给图片添加flex-shrink: 0，阻止flex布局自动缩小它，这样图片的width:70%就能正常生效：

div {
  display: flex;
  align-items: center;
}
img {
  flex-shrink: 0; /* 关键：禁止图片被压缩 */
}

方法2：用flex-basis定义初始大小 #

更贴合flex布局逻辑的做法是，用flex-basis代替width来定义图片的初始大小，同时配合flex-shrink:0：

div {
  display: flex;
  align-items: center;
}
img {
  flex-basis: 70%;
  flex-shrink: 0;
}

方法3：给flex容器设置明确宽度 #

如果父容器的宽度没有被明确指定，图片的70%就没有清晰的计算参照。给div设置width:100%（或者其他固定/百分比宽度），让图片的百分比宽度有明确的基准：

div {
  display: flex;
  align-items: center;
  width: 100%; /* 给容器明确宽度 */
}

额外优化 #

如果你的文本<p>需要占据图片之外的剩余空间，可以给它添加flex-grow:1，避免文本被挤压，同时还能自动填充容器：

p {
  flex-grow: 1;
  margin-left: 10px; /* 可选：给图片和文本增加间距 */
}

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