Flexbox 提供了创建灵活布局的能力，但是当涉及到包裹 Flex-Item 时，它们的宽度可能会改变变化很大。为了解决这个问题，让我们深入研究使用 CSS 媒体查询的巧妙解决方法。
解决方案
虽然不是严格意义上的解决方案，但以下方法提供了一种优雅的替代方案：媒体查询，无需借助 JavaScript。
SCSS Mixin
用法
将 mixin 应用于您的弹性项目：
高级替代
如果你的弹性容器的宽度不是由于视口大小的限制，您可以使用元素查询而不是浏览器媒体查询。这是 Flex 容器的 mixin：
说明
对于每个指定的 flex-basis，我们根据视口计算每行的最大项目数宽度。然后，我们创建媒体查询以将项目的最大宽度限制为视口宽度的百分比。
示例
查看下面更新的 CodePen：
https://codepen.io/anon/pen/aNVzoJ
这演示了弹性项目如何包裹后保持所需的宽度，确保布局一致。
以上是如何在 Flexbox 中包裹后保持统一的 Flex-Item 宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！
