Flexbox 是一种用于布局的 CSS3 模块，它可以很方便地实现弹性布局。在 Flexbox 中，我们可以通过设置 flex 属性来控制元素的尺寸和位置，但是在某些情况下，我们需要让元素根据内容自适应宽度，同时又要限制它的最大宽度，那么该怎么实现呢？
实现方法
我们可以利用 flex-grow 属性和 max-width 属性来实现元素的自适应最大宽度。flex-grow 属性用于设置元素的放大比例，如果一个元素的 flex-grow 值为 1，那么它会占据剩余空间的全部或一部分。而 max-width 属性则用于设置元素的最大宽度，当元素的宽度超过最大宽度时，它会自动缩小。
具体实现方法如下：
---------- - -------- ----- ---------- ----- - ----- - ----- - - -- -- --- ---------- -- ---------- ----- -- ---------- ------ -
上面的代码中，我们首先将容器设置为 flex 布局，并设置了 flex-wrap 属性为 wrap，这样如果容器的宽度不足以容纳所有元素时，元素就会自动换行。然后我们将每个元素的 flex 属性设置为 1 0 0，这样它们会根据内容自适应宽度，同时又不会超过最大宽度 200px。
示例代码
下面是一个完整的示例代码，你可以将它复制到 HTML 文件中进行测试：
--------- -----
------
------
----- ----------------
-------------- -----------------
-------
---------- -
-------- -----
---------- -----
-
----- -
----- - - -- -- --- ---------- -- ---------- ----- --
---------- ------
------- -----
-------- -----
------- --- ----- -----
-
--------
-------
------
---- ------------------
---- ----------------------------------------------------------
---- ----------------------------------------------------------
---- ----------------------------------------------------------
---- ----------------------------------------------------------
---- ----------------------------------------------------------
------
-------
-------总结
在 Flexbox 布局中实现元素的自适应最大宽度，可以利用 flex-grow 属性和 max-width 属性来实现。通过设置 flex-grow 属性为 1，可以让元素根据内容自适应宽度；通过设置 max-width 属性为一个固定值，可以限制元素的最大宽度。这种方法可以很方便地实现响应式布局，同时又保持了页面的美观性和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66185a51d10417a22288c8bb