如何在 Flexbox 中包裹后保持统一的 Flex-Item 宽度？

如何在包裹后保持统一的 Flex-Item 宽度

Flexbox 提供了创建灵活布局的能力，但是当涉及到包裹 Flex-Item 时，它们的宽度可能会改变变化很大。为了解决这个问题，让我们深入研究使用 CSS 媒体查询的巧妙解决方法。

解决方案

虽然不是严格意义上的解决方案，但以下方法提供了一种优雅的替代方案：媒体查询，无需借助 JavaScript。

SCSS Mixin

用法

将 mixin 应用于您的弹性项目：

高级替代

如果你的弹性容器的宽度不是由于视口大小的限制，您可以使用元素查询而不是浏览器媒体查询。这是 Flex 容器的 mixin：

说明

对于每个指定的 flex-basis，我们根据视口计算每行的最大项目数宽度。然后，我们创建媒体查询以将项目的最大宽度限制为视口宽度的百分比。

示例

查看下面更新的 CodePen：

https://codepen.io/anon/pen/aNVzoJ

这演示了弹性项目如何包裹后保持所需的宽度，确保布局一致。

以上是如何在 Flexbox 中包裹后保持统一的 Flex-Item 宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！