在 CSS Flexbox 布局中使用了 max-width 和 min-width 之后，它们不会工作

Flexbox 是一种强大的 CSS 布局模型，它可以让我们更轻松地控制页面元素的排列和分布。然而，在某些情况下，我们可能会遇到一些奇怪的现象，比如设置了 max-width 和 min-width 却不会生效。接下来，我们就来探究一下这个问题。

原因解释

在 Flexbox 布局中，我们可以使用 flex-basis 属性来设置一个元素的初始宽度。但是，如果我们同时设置了 max-width 和 min-width，它们并不会像我们想象的那样生效。原因是 flex-basis 属性的优先级更高，会覆盖 max-width 和 min-width。

当我们设置 flex-basis: auto 时，元素的初始宽度将由 max-width 和 min-width 决定。但是，如果我们设置了具体的宽度，max-width 和 min-width 将无法生效。

解决方案

要解决这个问题，我们可以使用一个小技巧：将 flex-basis 属性设置为 0。这样，元素的初始宽度将为 0，然后再通过 max-width 和 min-width 来设置宽度范围，就可以解决上述问题。

以下是示例代码：

.child {
  flex: 1 0 0; /* 仅设置 flex-basis 为 0，flex-grow 和 flex-shrink 不变 */
  max-width: 300px;
  min-width: 100px;
}

在上述代码中，我们使用了 flex: 1 0 0 来同时设置 flex-basis 属性为 0。这样，max-width 和 min-width 将会生效。

结论

在使用 CSS Flexbox 布局时，如果你希望元素的 max-width 和 min-width 属性生效，可以通过将 flex-basis 属性设置为 0 来解决。这个小技巧很简单，但却很实用，在实际项目中也有很好的应用场景。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736fdb0317fbffedf07444d