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

css 样式问题

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

问题代码：

<div class="store-info">
  <div class="left">
    @@##@@
  </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 布局中，子元素宽度失效怎么办？的详细内容，更多请关注其它相关文章！