CSS3 Reference


box-align

レイアウト方向

試す






コード

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

    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
}

サンプル

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

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

対応ブラウザ

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

パラメータ

start | end | center | baseline | stretch
初期値stretch
適用ボックス要素
継承しない
レベル3
%の解釈-
適用メディアVisual
参考文献Flexible Box Layout Module#4 Alignment

解説

子要素のレイアウト方向を指定します。

Safari系はサポートはしているようですが、反応しません。

start
ボックスを上端に揃えます。下端の余分の部分はそのまま余白とします。
end
ボックスを下端に揃えます。上端の余分の部分はそのまま余白とします。
center
ボックスを中央に揃えます。上下端の余分の部分はそのまま余白とします。
baseline
ボックスをベースラインに揃えます。”box-orientation”の値が”inline-axis”か”horizontalの時にのみ作用します。テーブルの場合は一番右上のセルのベースラインに揃えますが、面倒臭いので、て説明終わってしまいました。
stretch
ボックスをコンテナボックスの高さに揃えます。つまり余白はゼロです。

 

コメントする


トラックバック

投稿されたコメント