flex-line-count プロパティ (CSS)
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
flex-line-count CSS プロパティは、フレックスコンテナーの flex-wrap または flex-flow プロパティに balance キーワードが含まれる場合、フレックスアイテムが配置されるフレックス行の最小数を設定します。
試してみましょう
flex-line-count: 1;
flex-line-count: 3;
flex-line-count: 4;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
flex-wrap: wrap balance;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
構文
/* 整数値 */
flex-line-count: 1;
flex-line-count: 3;
flex-line-count: 12;
/* グローバル値 */
flex-line-count: inherit;
flex-line-count: initial;
flex-line-count: revert;
flex-line-count: revert-layer;
flex-line-count: unset;
値
このプロパティには、以下の値で指定します。
<integer>-
バランス調整および折り返し処理が適用されたフレックスアイテムが配置されるフレックス行の最小数を設定する正の整数です。デフォルト値は
1です。
解説
flex-line-count プロパティは、折り返しが行われるバランス型フレックスコンテナー（言い換えれば、wrap または wrap-reverse キーワードに加えて、balance キーワードが設定された flex-wrap または flex-flow プロパティを含むフレックスコンテナー）において、フレックスアイテムが配置されるフレックス行の最小数を設定します。
flex-line-count の主な用途は、リスト内のアイテム数にかかわらず、2 列（またはそれ以上）を均等に作成することです。このような場合、コンテンツの量が事前にわからないため、height や max-height を明示的に設定してもうまくいかず、意図した本数とは異なる列数になってしまう可能性があります。実装例については、均等な列の作成を参照してください。
balance が設定されていない場合、またはフレックスアイテムが複数のフレックス行に折り返されるように設定されていない場合、flex-line-count プロパティは効果を持ちません。
flex-line-count の値がフレックスアイテムの数以上である場合、フレックス行ごとに 1 つのフレックスアイテムが配置されます。
公式定義
| 初期値 | 1 |
|---|---|
| 適用対象 | 複数行のフレックスコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 数値 |
形式文法
flex-line-count =
<integer [1,∞]>
<integer> =
<number-token>
例
様々な flex-line-count 値の効果
この例では、4 つのボックスに対して flex-line-count の値を変化させた場合の効果を示しています。
HTML
4 つのコンテナー <div> を配置します。それぞれのコンテナーには class 属性に box が指定されており、それぞれに 10 個の子要素 <div> があります。それぞれのコンテナー <div> には、それぞれ異なる id 値が割り当てられています。
<div class="box" id="box-no-balance">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
</div>
<div class="box" id="box1">...</div>
<div class="box" id="box2">...</div>
<div class="box" id="box3">...</div>
CSS
すべてのボックスに display: flex を適用してフレックスコンテナーにし、flex-wrap の値を wrap balance に設定することで、それらに含まれるすべての子要素が、バランスよく複数の行に折り返されるようにします。
.box {
display: flex;
flex-wrap: wrap balance;
}
同時に、フレックス子要素に flex の値として 1 1 150px を設定しました。これにより、これらの要素の基本幅は 150px となり、余った空間はそれぞれのフレックス行内のアイテムに均等に分配されます。
.box > * {
flex: 1 1 150px;
}
#box-no-balance フレックスコンテナーについては、元の flex-wrap: wrap balance の値を wrap で上書きすることで、バランス調整が除去され、行数がゼロになります。それぞれのフレックスコンテナーに異なる flex-line-count の値を適用し、その値を段階的に増加することで、子要素が徐々に多くのフレックス行に配置されるようにします。
#box-no-balance {
flex-line-count: 6;
flex-wrap: wrap;
}
#box1 {
flex-line-count: 3;
}
#box2 {
flex-line-count: 4;
}
#box3 {
flex-line-count: 5;
}
簡潔にするため、残りのCSSは省略しています。
結果
以下の点に注意してください。
- 1 つ目のフレックスコンテナーでは、
balanceキーワードがflex-wrap値に設定されていないため、その子要素は均等に配置されず、flex-line-countの値は無視されます。 - 2 つ目のフレックスコンテナーの
flex-line-count: 3という宣言は、フレックス子要素のレイアウトに影響を与えません。フレックスアイテムはデフォルトで 4 つのフレックス行に分散されるため、4以下の値を設定しても何の効果もありません。
均等な列の作成
この例では、flex-line-count を使用して、2 列のバランスが取れたレイアウトを作成する方法を示しています。
HTML
10 個の <li> 要素を含む <ol> 要素を挿入します。
<ol>
<li>
<a href="#">The Silent Cartographer</a>, published by Meridian House,
released March 12, 2014.
</li>
<li>
<a href="#">Echoes of the Fallow Field</a>, published by Northbridge Press,
released July 4, 2009.
</li>
...
</ol>
CSS
リストの display を flex に設定します。flex-direction の値を column、flex-wrap の値を balance に、flex-flow 一括指定を用いて設定しました。これにより、フレックス行は列ごとに配置され、折り返し時にはバランスが取れるようになります。gapの値 10px 40px は、それぞれの列内のフレックスアイテム間の間隔を 10px、フレックス行間の間隔を 40px に指定します。
最後に、flex-line-count の値を 2 に設定しました。これにより、リストに固定の高さが設定されていなくても、たとえコンテンツの量がどれだけ多かろうとも、その内容は常に 2 つの均等な列に分割されて表示されます。
ol {
display: flex;
gap: 10px 40px;
flex-flow: column balance;
flex-line-count: 2;
}
簡潔にするため、残りのCSSは省略しています。
結果
仕様書
| 仕様書 |
|---|
| CSS Flexible Box Layout Module Level 2 # flex-line-count-property |