box-lines

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

警告: これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

box-linesCSS のプロパティで、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。

css
/* キーワード値 */
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-flexbox-flex-groups を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 box-pack プロパティで定義されている通り、それぞれの行で個別に計算されます。

構文

box-lines プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

single

ボックスの要素は単一の行または列に配置されます。

multiple

ボックスの要素は複数の行または列に配置されます。

公式定義

初期値single
適用対象ボックス要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

単純な使用法の例

仕様書の当初の版では、box-linesで、フレックスコンテナーの子を複数の行に折り返すことを指定できました。これは WebKit ベースのブラウザーのみが対応しており、接頭辞が付いていました。

css
div {
  display: box;
  box-orient: horizontal;
  box-lines: multiple;
}

現在のフレックスボックスで同等のものは flex-wrap です。

仕様書

標準仕様には含まれていません。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
box-lines
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報