web-dev-qa-db-ja.com

ラップ後も同じ幅のフレックスアイテム

次のような純粋なCSSソリューションを作成することは可能ですか？

  1. アイテムにはいくつかのmin-width。
  2. すべてのコンテナの幅を埋めるために動的に成長し、新しい行に折り返す必要があります
  3. リスト上のすべてのアイテムは同じ幅である必要があります。

これは、現在の外観です。

enter image description here

そして、これは私もそれがどのように見えるようにするかです（期待される結果を表示するために、これらの最下位アイテムの幅を手動で管理しました）：

enter image description here

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

フィドルデモ です。

htmlcsscss3flexboxcss-grid
29
Adam Szmyd

現在、flexboxは、最後の行または列の柔軟なアイテムを整列させるための明確なソリューションを提供していません。現在の仕様の範囲を超えています。

この問題を回避するために人々が使用した情報とさまざまなソリューションを次に示します。

ただし、別のCSS3テクノロジーGrid Layoutでは、最終行の配置は問題になりません。実際、この方法では非常に簡単です（HTMLを変更する必要はありません）。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

jsFiddleデモ

grid-template-columns プロパティは、明示的に定義された列の幅を設定します。上記のルールは、グリッドコンテナーにできるだけ多くの列を作成するよう指示しています（auto-fit）、各列の幅は最小100px、最大1fr、残りのスペースを消費します（flex-grow: 1）。行にスペースがなくなると、新しい行が作成されます。

grid-auto-rows プロパティは、自動的に作成される行の高さを設定します。このグリッドでは、各行の高さは20ピクセルです。

grid-gap プロパティはgrid-column-gapおよびgrid-row-gap。このルールは、10pxギャップbetweenグリッドアイテムを設定します。アイテムとコンテナの間の領域には適用されません。

上記の設定はすべてコンテナレベルです。フレックスアイテムとは異なり、グリッドアイテムから高さ、幅、およびマージン（ある程度）の責任を削除できます。

CSSグリッドのブラウザサポート

  • Chrome-2017年3月8日（バージョン57）のフルサポート
  • Firefox-2017年3月6日（バージョン52）のフルサポート
  • Safari-2017年3月26日（バージョン10.1）のフルサポート
  • Edge-2017年10月16日（バージョン16）のフルサポート
  • IE11-現在の仕様はサポートされていません。廃止されたバージョンをサポート

完全な画像は次のとおりです。 http://caniuse.com/#search=grid

Firefoxのクールグリッドオーバーレイ機能：Firefox開発ツールでは、グリッドコンテナを検査すると、 CSS宣言の小さなグリッドアイコンです。クリックすると、ページ上のグリッドのアウトラインが表示されます。

enter image description here

詳細はこちら： https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

30
Michael_B

そうではない、純粋なCSSソリューションはありません。 Flexboxは常にコンテナの幅全体を成長可能なアイテムで埋めようとします。したがって、ユーザーには見えない間、空のスペースを埋めるいくつかの隠しアイテムを挿入する必要があります。

これを試して：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: yellow;
  min-width: 100px;
  height: 20px;
  text-align: center;
  border: 1px solid red;
  flex-grow: 1;
}

.item-hidden {
  min-width: 100px;
  flex-grow: 1;
  border: 1px solid transparent;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
  <div class="item-hidden"></div>
</div>

同様の問題がここで議論されました： Flex-box：最後の行をグリッドに揃える

将来、複数の:: after擬似要素を使用できるようになるため、HTMLに追加のアイテムを挿入する必要はありません。

8
Ondra Koupil