在前端开发中，我们经常使用 Flexbox 布局来实现网页的排版。Flexbox 布局可以方便地对网页中的子元素进行位置控制，并且对于容器的大小变化也能够自动适应。但是在使用 Flexbox 布局时，经常会遇到一个问题，那就是 width 和 flex-basis 冲突。这篇文章将会介绍这个问题的本质以及如何解决它。
问题描述
在 Flexbox 布局中，容器和子元素都有自己的 width 属性。容器的 width 属性定义了容器的宽度，子元素的 width 属性定义了子元素的宽度。同时，子元素还有一个 flex-basis 属性，它定义了子元素在没有任何弹性因素时的宽度。在某些情况下，这些属性会发生冲突，导致布局出现问题。
下面这个例子就展示了这个问题：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
width: 500px;
display: flex;
justify-content: space-between;
}
.item {
width: 200px;
flex-basis: 300px;
}在这个例子中，我们定义了一个容器，它的宽度是 500px，子元素有三个，每个子元素的 width 属性是 200px，flex-basis 属性是 300px。这个布局看上去应该没有问题，但是实际上，它的效果并不如我们所期望：
可以看到，容器的宽度是 500px，三个子元素的宽度分别是 300px、300px 和 200px。由于宽度超出容器宽度，第三个子元素溢出到容器外面了，导致布局出现了问题。
原因分析
发生上述问题的原因是什么呢？首先我们需要了解一下 Flexbox 布局的实现原理。在 Flexbox 布局中，子元素的宽度是由 flex-basis 和 flex-grow 属性共同来决定的。其中，flex-basis 属性定义了子元素在没有任何弹性因素时的宽度，而 flex-grow 属性定义了子元素在存在弹性空间时的宽度增量比例。因此，如果 flex-basis 和 width 属性同时存在，就容易发生冲突。
在上面的例子中，由于每个子元素的 flex-basis 属性都比 width 属性大，因此 flex-basis 属性的优先级更高，导致子元素的宽度超出了容器的宽度。
解决方法
那么如何解决这个问题呢？其实很简单，只需要把子元素的 width 属性去掉即可。这是因为，在设置 flex-basis 属性时，如果没有设置 width 属性，默认会把它设置为 auto。此时，子元素的宽度由 flex-basis 和 flex-grow 共同决定，而不会与容器的宽度发生冲突。
改正上面例子中的代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
// javascriptcn.com 代码示例
.container {
width: 500px;
display: flex;
justify-content: space-between;
}
.item {
flex-basis: 300px;
}这样，布局就没有问题了。三个子元素的宽度分别是 167px、167px 和 166px，总和正好等于容器的宽度：
总结
本文介绍了 Flexbox 布局中 width 和 flex-basis 冲突的问题。我们分析了问题的本质，然后提出了解决方法。总之，当需要设置 flex-basis 属性时，如果存在 width 属性，就要特别小心，尽可能把 width 属性设为 auto，以免引起布局出错。
希望这篇文章能对你有所帮助，也为你解决了一些困惑。记住，掌握技术不只是知道它的用处，还要了解它的本质和规则。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652997877d4982a6ebc12ccd