CSS3 Pre-Reference



box-pack

ボックスのパッキング方法

試す





コード

#containe p {
    display: -webkit-box;
    display: -moz-box;

    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
}

サンプル

※サポートしていないブラウザでは動作しません。

左のボックス
真ん中のボックス
二列目
右のボックス

コメントする


対応ブラウザ

Firefox
Chrome/Safari
3.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

start | end | center | justify
初期値 start
適用 ボックス要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 Flexible Box Layout Module#6 Packing along the box axis

解説

ボックスのパッキング方法を指定します。テキストで言う”text-align”のようなものです。

start
子要素を要素の開始位置から流し込みます。つまり要素の終了位置でオーバーフローするか、余白ができます。
end
子要素を要素の終了位置から流し込みます。つまり要素の開始位置でオーバーフローするか、余白ができます。
center
要素の両端でオーバーフロー、余白を等分します。
justify
子要素と子要素の間でオーバーフロー、余白を等分します。

トラックバック

投稿されたコメント