如何在 Flexbox 布局中实现包裹 Flex 项目的一致宽度？-css教程-PHP中文网

如何在 Flexbox 布局中实现包裹 Flex 项目的一致宽度？

Patricia Arquette

发布： 2024-11-20 04:38:02

原创

966 人浏览过

How to Achieve Consistent Widths for Wrapped Flex Items in Flexbox Layouts?

如何确保 Flexbox 布局中包裹的 Flex 项目的宽度一致

问题

在 Flexbox 布局中，Flex 项目通常遵循指定的最小和最大宽度。然而，当弹性项目换行到新行时，它们往往会扩展以占据可用空间，从而导致不同行上的项目之间的宽度不一致。

解决方案

虽然没有直接的解决方案对于 CSS 规范中的此问题，可以使用媒体查询来实现解决方法。

Mixin 方法

SCSS Mixin:

@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)
}

登录后复制

说明

此 mixin 根据指定的 Flex 生成一系列媒体查询- 弹性项目的基础。每个媒体查询通过将 100% 除以适合该行的 Flex 项目数量来计算给定视口宽度的 Flex 项目的最大宽度。

更新了基于容器的控件的 Mixin

在某些情况下，Flex容器的宽度可能与视口宽度不匹配。为了解决这个问题，可以将 mixin 的更新版本应用于 Flex 容器：

@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
  display: flex;
  flex-wrap: wrap;

  > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: $flex-basis;
  }

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

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

    &[min-width~="#{$flex-basis * $multiplier}"] > * {
      max-width: percentage(1/$multiplier);
    }
  }
}

登录后复制

用法：

将 mixin 应用于 Flex 容器：

.flex-container {
  @include flex-container-wrap-items(100px)
}

登录后复制

示例

修改后的 CodePen 示例可以在这里找到：
http://codepen.io/anon/pen/aNVzoJ

注意事项

此方法不支持所有行上的 Flex 项目之间的宽度相等。
如果最大视口宽度已知，则应指定它以避免过多的媒体查询。

以上是如何在 Flexbox 布局中实现包裹 Flex 项目的一致宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！