CSS3ボックスパックのプロパティ
例
ボックスアライン箱パック中心の特性の両方を使用してdiv要素の子要素：
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
»をお試しください
ブラウザのサポート
現在の主流のブラウザは、ボックス・パックの属性をサポートしていません。
代わりにサポート-ms-フレックスパックpropertyプロパティを使用して、Internet Explorerの10。
MOZ-ボックスパックのサポート - 私有財産によってFirefoxの。
私有財産の-webkit-ボックスパックのサポートを通じてサファリ、オペラ、とChrome。
注：IEのInternet Explorer 9の以前のバージョンでは、柔軟性のあるボックスをサポートしていません。
属性の定義と指示
子要素は、子要素のボックスよりも小さいのボックス内に置かれたときにボックスパックボックス属性を指定します。
この属性は、クロスフレームの水平位置、垂直フレームの垂直位置を指定します。
| デフォルト： | スタート |
|---|---|
| 継承： | いいえ |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | オブジェクト.style.boxPack = "センター" |
文法
box-pack: start|end|center|justify;
| 値 | 説明 |
|---|---|
| スタート | ボックスの一般的な方向について、最初の子は、左側（放置後のすべての余分なスペースの最後の子要素）の左端に配置されています。 逆ボックスの場合、最後の子要素の右端を右側に配置されている（すべての余分なスペースがの最初の子要素の前に置かれています） |
| 終了 | 法線方向ボックスの場合、右端の最後の子要素は、右（前にすべての最初の子余分なスペース）に配置されました。 逆ボックスについては、左側の左端の最初の子（放置後のすべての余分なスペースの最後の子要素） |
| センター | 余分なスペースが半分に均等に分割され、前半は最後の子要素の他の半分を置き、最初の子に配置されています |
| 正当化します | 各サブ要素に割り当てられた平均の追加スペース |