Flexbox レイアウトでラップされた Flex アイテムの幅を一貫して実現するにはどうすればよいですか?

フレックスボックス レイアウトでラップされたフレックス項目の幅を一貫して確保する方法

問題

フレックスボックス レイアウトでは、フレックス項目は通常、指定された幅に準拠します。最小幅と最大幅。ただし、フレックス項目が新しい行に折り返されると、使用可能なスペースを占有するために拡張する傾向があり、その結果、異なる行の項目間の幅が不一致になります。

解決策

直接的な解決策はありません。 CSS 仕様内のこの問題に対しては、メディア クエリを使用して回避策を実現で​​きます。

Mixin アプローチ

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

説明

このミックスインは、指定されたフレックスに基づいて一連のメディア クエリを生成します-フレックス項目の基礎。各メディア クエリは、100% をその行に収まるフレックス アイテムの数で割ることにより、指定されたビューポート幅に対するフレックス アイテムの最大幅を計算します。

コンテナベースのコントロール用に更新された 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);
    }
  }
}

使用法:

ミックスインをフレックス コンテナに適用します。

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

例

変更された CodePen の例はここにあります:
http://codepen.io/anon/pen/aNVzoJ

注意事項

• このアプローチでは、すべての行のフレックス項目間の等しい幅はサポートされません。
• ビューポートの最大幅がわかっている場合は、過剰なメディア クエリを避けるためにそれを指定する必要があります。

以上がFlexbox レイアウトでラップされた Flex アイテムの幅を一貫して実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。