Flexbox 中的 flex-basis 和 width 有什么区别？

在 Flexbox 中，我们可以使用 flex-basis 和 width 来指定一个元素的宽度。那么它们之间有什么区别呢？

flex-basis

flex-basis 用于设置一个元素在主轴方向上的初始大小。它的默认值是 auto，表示元素会根据自身内容和其他因素自适应宽度。

我们可以通过指定一个具体的值（如 flex-basis: 300px;）来强制设定元素的宽度。此时，它的值会将其它 flex 元素自适应的空间挤压掉，直到剩下 flex 容器的可用空间不足为止。

以下是一个使用 flex-basis 的例子：

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
}

在上面的例子中，.item 的宽度会被设置为 200 像素。

width

与此不同，width 属性是一般的 CSS 属性，用于设置一个元素的宽度。它的默认值为 auto，表示元素会根据容器和自身内容自适应宽度，或者继承父元素的宽度（如果它是一个块级元素）。

与 flex-basis 不同，width 不会影响 flex 容器内其它元素的大小或位置。

以下是一个使用 width 的例子：

.container {
  display: flex;
}

.item {
  width: 200px;
}

在上面的例子中，.item 的宽度仍然会被设置为 200 像素，但不会对其它元素的大小或位置产生影响。

综上，flex-basis 用于设置元素在主轴方向上的初始大小，并在 flex 容器内分配剩余空间。而 width 则只是基本的 CSS 属性，用于设置元素的宽度。