Flexbox布局中设置图片width后图片消失问题求助

嘿，我看到你遇到的麻烦了——给图片设置width百分比后直接消失，宽高全变成0。翻了你的代码，问题出在CSS选择器的错误使用上，咱们一步步来搞定：

问题根源 #

你在CSS里写了这么一行：

.exclusiveItem { -webkit-box-flex: .4; -ms-flex: .4; flex: .4; }

但exclusiveItem是外层的大容器，并不是.container这个flex容器里的子项。真正需要分配空间的是.exclusiveItemContent（就是文字内容那一块），它和.exclusiveItemImg是.container下的两个flex子项，得给它们设置flex属性来分配容器空间。

现在的情况是：.exclusiveItemContent没设置flex属性，它会默认根据自身内容占满尽可能多的空间，直接把设置了flex:.5的.exclusiveItemImg挤压到宽度为0，里面的图片自然就没尺寸了。

修复步骤 #

1. 把错误的flex规则从.exclusiveItem转移到.exclusiveItemContent上：

/* 删掉原来的错误规则 */
/* .exclusiveItem { -webkit-box-flex: .4; -ms-flex: .4; flex: .4; } */

/* 替换成下面这行 */
.exclusiveItemContent { -webkit-box-flex: .4; -ms-flex: .4; flex: .4; }

2. 给.exclusiveItemImg加上width: 100%（可选，但能让图片的百分比宽度计算更稳定）：

.exclusiveItemImg { -webkit-box-flex: .5; -ms-flex: .5; flex: .5; width: 100%; }

3. 给图片加上height: auto，确保它能保持原始比例：

.exclusiveItemImg img { width: 50%; pointer-events: none; height: auto; }

修复后的完整CSS #

.exclusiveItem { background-image: linear-gradient(315deg, #f6a364 0%, #ffc085 74%); height: 70vh; }
.exclusiveItem>.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; }
.exclusiveItemContent { -webkit-box-flex: .4; -ms-flex: .4; flex: .4; }
.exclusiveItem h1 { padding-bottom: 1.6rem; font-size: 4rem; }
.exclusiveItem p { font-size: 1.5rem; }
.exclusiveItem button { border: none; background: #FF6200; border-radius: 60px; margin-top: 2.5rem; padding: 1rem 3rem; color: white; text-decoration: none; font-size: 1.2rem; cursor: pointer; }
.exclusiveItemImg { -webkit-box-flex: .5; -ms-flex: .5; flex: .5; width: 100%; }
.exclusiveItemImg img { width: 50%; pointer-events: none; height: auto; }

这样修改后，.container里的两个子项会按照flex:.5和flex:.4的比例分配空间，图片的宽度会基于.exclusiveItemImg的宽度正常计算，就不会再出现宽高为0的情况了。

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