次のような純粋なCSSソリューションを作成することは可能ですか?
min-width
。これは、現在の外観です。
そして、これは私もそれがどのように見えるようにするかです(期待される結果を表示するために、これらの最下位アイテムの幅を手動で管理しました):
.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>
フィドルデモ です。
現在、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>
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グリッドのブラウザサポート
完全な画像は次のとおりです。 http://caniuse.com/#search=grid
Firefoxのクールグリッドオーバーレイ機能:Firefox開発ツールでは、グリッドコンテナを検査すると、 CSS宣言の小さなグリッドアイコンです。クリックすると、ページ上のグリッドのアウトラインが表示されます。
詳細はこちら: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
そうではない、純粋な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に追加のアイテムを挿入する必要はありません。