box-pack

構文

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

値

start

ボックスは内容を先頭にまとめ、残りの空間を末尾に残します。

center

ボックスは内容を中央にまとめ、残りの空間を先頭と末尾に均等に分配します。

end

ボックスは内容を末尾にまとめ、残りの空間を先頭に残します。

justify

空間はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には空間が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。

メモ

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

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

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

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

公式定義

形式文法

例

box-pack の例

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>

仕様書

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

ブラウザーの互換性

関連情報

• box-orient
• box-direction
• box-align