Flex 布局下子元素宽度失效？如何解决？

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

父元素使用 flex，子元素 width 失效？

在项目中使用 flex 布局时，发现第一个子元素的 width 无效，而在 jsfiddle 中却正常运行。

代码如下：

<div   style="max-width:100%">
  <div class="box">
    <div class="status"></div>
    <div class="text">天津饭饭天津饭饭</div>
    <button class="btn">测试</button>
  </div>
</div>

.box {
  display: flex;
  align-items: center;
}
.status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: rgb(209, 48, 15);
}
.text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.btn {
  transform: scale(0.6);
}

在项目中，第一个元素的 width 失效，而在 jsfiddle 中正常。这是因为在极端情况下，flex 布局会导致变形。为了解决这个问题，需要使用 flex: none。

添加 flex: none 后，子元素就不会自动缩放。

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