メディア クエリを使用してラップされた Flex アイテムの幅を均一に維持するにはどうすればよいですか?

ラップされたフレックス項目の均一な幅の維持

フレックスボックスを使用して一連の項目を表示する場合、均一な幅を維持することが望ましい場合があります。項目が複数行に折り返される場合でも同様です。従来、これは、特にアイテムの幅が 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);
    }
  }
}

使用法

回避策を適用するには、ミックスインをフレックス項目に適用するだけです:

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

説明

メディアを作成しますクエリを実行して、ブラウザ ウィンドウの幅に基づいて項目の最大幅を定義します。たとえば、各アイテムの最大幅を 100 ピクセルにする必要がある場合、100 ピクセルから 600 ピクセルの範囲のブラウザ幅に対応するメディア クエリを作成し、アイテムの幅がさまざまなブラウザ サイズに適切に適応するようにします。

このミックスインを実装することで、ラップされたフレックス項目は、指定された制約内に留まりながら、定義された幅を維持します。不一致を防ぐために、フレックス コンテナの幅はビューポートのサイズと一致する必要があることに注意することが重要です。

さらに、提供された更新により、フレックス コンテナに回避策を適用できるようになり、アイテムの適切なラッピングと幅の維持が保証されます。コンテナの幅を変更します。

以上がメディア クエリを使用してラップされた Flex アイテムの幅を均一に維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。