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 は上端になります。
- 垂直方向の要素の場合、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 のいずれかである要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
Error: could not find syntax for this item
例
box-pack の例
css
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> 仕様書
標準仕様には含まれていません。
