ラッピング時に行全体で一貫したフレックス項目の幅を維持するにはどうすればよいですか?

ラップされたフレックス項目が前の行の幅を維持するようにする

フレックス コンテナーでは、フレックス項目がラップされると、許容される最大スペースを占める傾向があり、幅の不一致が発生します。異なる行の項目間。これに対処するには、次の 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);
    }
  }
}

Usage:

ミックスインをフレックスに適用するitem:

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

解決策 2: 要素クエリ用の Flex Container 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);
    }
  }
}

Usage:

mixin をフレックスコンテナ:

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

以上がラッピング時に行全体で一貫したフレックス項目の幅を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。