换行时如何保持行间 Flex 项目宽度一致？

确保换行的 Flex 项目保持前一行的宽度

在 Flex 容器中，当 Flex 项目换行时，它们往往会占用最大允许空间，从而导致宽度不一致不同行上的项目之间。为了解决这个问题，我们可以采用以下 CSS 技巧：

解决方案 1：为 Flex 项目自定义 Mixin

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

解决方案2：用于元素查询的 Flex 容器 Mixin

Mixin：

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

以上是换行时如何保持行间 Flex 项目宽度一致？的详细内容。更多信息请关注PHP中文网其他相关文章！