如何使用媒体查询保持包裹的 Flex 项目的宽度一致？

保持包裹的 Flex 项目的统一宽度

当使用 Flexbox 来显示一系列项目时，可能需要保持统一的宽度对于项目，即使它们换行为​​多行。传统上，这提出了挑战，特别是当项目的宽度在使用 min-width 和 max-width 指定的范围内时。

本文提出了一种非常规但有效的解决方法，它利用媒体查询来实现所需的效果.

混音(SCSS)

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

用法

要应用解决方法，只需将 mixin 应用于您的 Flex 项目：

.flex-item {
  @include flex-wrap-fix(100px)
}

说明

我们创建媒体查询根据浏览器窗口宽度定义项目的最大宽度。例如，如果每个项目的最大宽度为 100px，我们会为 100px 到 600px 的浏览器宽度创建媒体查询，确保项目宽度适当适应不同的浏览器尺寸。

通过实现此 mixin，包裹的弹性项目将保持其定义的宽度，同时保持在指定的约束范围内。需要注意的是，Flex 容器宽度应与视口大小匹配，以防止出现差异。

此外，提供的更新允许将解决方法应用于 Flex 容器，确保正确的项目包装和宽度维护，无论如何弹性容器宽度。

以上是如何使用媒体查询保持包裹的 Flex 项目的宽度一致？的详细内容。更多信息请关注PHP中文网其他相关文章！