More than 5 years have passed since last update.

webkit-boxのまとめ

Posted at 2014-04-23

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>