box-pack

非標準

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

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

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

/* キーワード値 */
box-pack: start;
box-pack: center;
box-pack: end;
box-pack: justify;

/* グローバル値 */
box-pack: inherit;
box-pack: initial;
box-pack: unset;

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

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

構文

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

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

形式文法

start | center | end | justify

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;
}
<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>

メモ

まとめる目的で start で示されるボックスの端は、ボックスの向きと方向に依存します。

  Normal Reverse
Horizontal
Vertical

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

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

仕様書

このプロパティは標準外ですが、 CSS3 Flexbox の早期の草稿に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。

ブラウザーの対応

BCD tables only load in the browser

関連情報