ラップ後にフレックスボックス レイアウトで一貫した項目幅を維持するにはどうすればよいですか?

フレックスボックスの折り返し後に均一な項目幅を維持する

フレックスボックス レイアウトでは、複数の行にわたって一貫した項目幅を維持するのが難しい場合があります。ただし、これは、以下で説明するように、CSS プロパティの組み合わせによって実現できます。

CSS プロパティ

flex-grow

項目が相対的に拡大する係数を設定します。他のアイテム。これを 1 に設定すると、各項目の成長の可能性が均等になります。

flex-basis

項目の初期サイズを定義します。これにより、項目の最小幅が決まります。

max-width

項目の最大幅を設定し、目的のサイズを超えないようにします。

CSS メディアクエリ

メディア クエリは、ビューポート サイズに基づいて max-width プロパティを調整し、複数のアイテムの幅の一貫性を維持するために使用されます。 Lines.

例

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  max-width: 100px;
  flex: 1 0 0;
}

@media (min-width: 200px) {
  li {
    max-width: 50%;
  }
}

@media (min-width: 300px) {
  li {
    max-width: 33.33333%;
  }
}

説明

この CSS は、各項目の初期幅を 100px に設定します。次に、ビューポート サイズの変更に応じてメディア クエリを使用して max-width プロパティを調整し、項目が新しい行に折り返された場合でも目的の幅を維持できるようにします。

代替ソリューション

Flex -Wrap-Fix Mixin

よりエレガントな代替方法は、flex-wrap-fix を利用することです。 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);
    }
  }
}

使用法

フレックス項目にミックスインを適用します:

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

このミックスインは CSS メディア クエリと同じ結果を達成しますが、その必要性はありません反復的なコードに対応し、メンテナンスが容易になります。

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