box-pack

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

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

-moz-box-pack および -webkit-box-pack は CSS のプロパティで、 -moz-box または -webkit-box がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に空間がある場合のみ見ることができます。

css

/* キーワード値 */
box-pack: start;
box-pack: center;
box-pack: end;
box-pack: justify;
/* グローバル値 */
box-pack: inherit;
box-pack: initial;
box-pack: unset;

レイアウトの方向は要素の方向、 horizontal または vertical に依存します。

構文

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

値

start: ボックスは内容を先頭にまとめ、残りの空間を末尾に残します。
center: ボックスは内容を中央にまとめ、残りの空間を先頭と末尾に均等に分配します。
end: ボックスは内容を末尾にまとめ、残りの空間を先頭に残します。
justify: 空間はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には空間が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。

メモ

ボックスの向きや方向によって、まとめる際に指定するボックスの端は異なります。

水平方向の要素の場合、start は上端になります。
垂直方向の要素の場合、start は左端になります。

Normal	Reverse
Horizontal	left	right
Vertical	top	bottom

start と反対の端は end で表されます。

まとめ方が要素の pack 属性を使用して設定されていた場合は、スタイルは無視されます。

公式定義

初期値	`start`
適用対象	CSS の `display` の値が `-moz-box`, `-moz-inline-box`, `-webkit-box`, `-webkit-inline-box` のいずれかである要素
継承	なし
計算値	指定通り
アニメーションの種類	離散値

div.example {
 border-style: solid;
 display: -moz-box; /* Mozilla */
 display: -webkit-box; /* WebKit */
 /* このボックスを子よりも高くし、
 box-pack のための余裕を作る */
 height: 300px;
 /* このボックスを、水平方向に中央揃えされた
 内容を表示するのに十分な幅にする */
 width: 300px;
 /* 子を垂直方向に並べる */
 -moz-box-orient: vertical; /* Mozilla */
 -webkit-box-orient: vertical; /* WebKit */
 /* 子をこのボックスの水平方向に中央揃えする */
 -moz-box-align: center; /* Mozilla */
 -webkit-box-align: center; /* WebKit */
 /* 子をこのボックスの下にまとめる */
 -moz-box-pack: end; /* Mozilla */
 -webkit-box-pack: end; /* WebKit */
}
div.example p {
 /* 子を親より狭くして、
 box-align のための余裕を作る */
 width: 200px;
}

html

<div class="example">
 <p>I will be second from the bottom of div.example, centered horizontally.</p>
 <p>I will be on the bottom of div.example, centered horizontally.</p>
</div>

[フレーム]