フレックスボックスでラップした後、フレックスアイテムの幅を均一に維持するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-17 02:07:03

オリジナル

468 人が閲覧しました

How to Maintain Uniform Flex-Item Width After Wrapping in Flexbox?

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

フレックスボックスには柔軟なレイアウトを作成する機能がありますが、フレックス項目をラッピングすると幅が変わることがあります。大幅に変化します。この問題に対処するために、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 サイトの他の関連記事を参照してください。