非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。
CSS の box-lines
プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。
/* キーワード値 */ box-lines: single; box-lines: multiple; /* グローバル値 */ box-lines: inherit; box-lines: initial; box-lines: unset;
既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は box-lines
プロパティを使用して変更することができます。既定値は single
であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。
しかし、 multiple
の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。
水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。
同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。
配置行の数が決定すると、 box-flex
の計算値が 0
以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 box-flex
と box-flex-groups
を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 box-pack
プロパティで定義されている通り、それぞれの行で個別に計算されます。
構文
box-lines
プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。
値
single
- ボックスの要素は単一の行または列に配置されます。
multiple
- ボックスの要素は複数の行または列に配置されます。
形式文法
single | multiple
仕様書
- Flexible Box Layout Module (W3C Working Draft) 註: この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。
- Old Flexible Box Layout Module 註: Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。
ブラウザーの対応
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
box-lines | Chrome
未対応
1 — 67
| Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera
未対応
? — 54
| Safari
完全対応
3
| WebView Android
未対応
≤37 — 67
| Chrome Android
未対応
18 — 67
| Firefox Android 未対応 なし | Opera Android
未対応
? — 48
| Safari iOS
完全対応
1
| Samsung Internet Android
未対応
1.0 — 9.0
|
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。