CSS3 Pre-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
ボックスをコンテナボックスの高さに揃えます。つまり余白はゼロです。

 

トラックバック

投稿されたコメント