フレックスボックスでラップした後、フレックスアイテムの幅を均一に維持するにはどうすればよいですか?

ラッピング後にフレックス項目の幅を均一に維持する方法

フレックスボックスには柔軟なレイアウトを作成する機能がありますが、フレックス項目をラッピングすると幅が変わることがあります。大幅に変化します。この問題に対処するために、CSS メディア クエリを使用した賢い回避策を詳しく見てみましょう。

解決策

厳密には解決策ではありませんが、次のアプローチは、次のアプローチを使用したエレガントな代替手段を提供します。 JavaScript を使用せずにメディア クエリを実行します。

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

使用法

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

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

高度な代替手段

フレックスの場合コンテナの幅はビューポート サイズに制限されないため、ブラウザのメディア クエリの代わりに要素クエリを使用できます。フレックス コンテナのミックスインは次のとおりです。

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

説明

指定されたフレックス ベースごとに、ビューポートに基づいて行ごとの最大項目数を計算します。幅。次に、アイテムの最大幅をビューポート幅のパーセンテージとして制限するメディア クエリを作成します。

例

以下の更新された CodePen を確認してください。

https://codepen.io/anon/pen/aNVzoJ

これは方法を示していますflex-item はラップ後も希望の幅を維持し、一貫したレイアウトを保証します。

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