box-lines

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-flex
• box-flex-group
• box-pack