webkit-boxのまとめ

float使ったサイト多いですが、webkit-boxが便利なのでまとめ

概要

要はコンテンツを横並びにできます。

書き方

sample.html

<div style='display:-webkit-box'>
  <div>A</div>
  <div>B</div>
</div>

これで横並びになる。

位置の揃え方

1.縦
-webkit-box-align

2横
-webkit-box-pack

3.指定できる値
1.start
横なら左詰め、縦なら上詰め
2.center
横、縦とも、中央
3.end
横　右寄せ
縦 下寄せ
4.just
均等割

例

sample.html

 <div style='display:-webkit-box;-webkit-box-pack:center'>
  <div>A</div>
  <div>B</div>
</div>