CSS Flex 布局中，子元素宽度失效怎么办？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS Flex 布局中，子元素宽度失效怎么办？ 》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

CSS 样式问题

有人遇到了这样的问题：两张图片无法显示，left 样式没有宽度，而父级有宽度，子级的 30% 也无效。

问题代码：

<div class="store-info">
  <div class="left">
    <img class="left-img" />
  </div>
</div>

.store-info {
  display: flex;
  .left {
    width: 30%;  // 无效
  }
}

问题分析：

从代码中可以看出，left 的宽度样式似乎被覆盖了。猜测原因可能是父级或祖级元素的 flex 布局使用不当。

解决方案：

提供了完整的 right 样式代码，以便检查是否存在与 left 冲突的样式：

.store-info {
  display: flex;
  .left {
    width: 30%;
  }
  .right {
    flex: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

现在，left 的宽度样式应该可以生效，两张图片也能正常显示。

到这里，我们也就讲完了《CSS Flex 布局中，子元素宽度失效怎么办？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！