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 来设置宽度范围，就可以解决上述问题。
以下是示例代码：
------ - ----- - - -- -- --- ---------- - ----------- - ----------- -- -- ---------- ------ ---------- ------ -
在上述代码中，我们使用了 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