仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。
各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。
今回はとりあず入門ということで要素を横に並べる方法をご紹介します。
Flexboxって？
Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。
今までは可変要素を同じ割合で並べたいときはcalcで計算。
横並びになっている複数個の要素の高さが不確定、かつ高さを全て一番高いものに合わせたい、なんて時にはjsを使っていたと思います。
それをFlexboxは簡単な記述で実現してくれます。
子要素をならべてみよう
とりあえず上の画像のように、横に並べてみましょう。
HTML
|
1 2 3 4 5 6 7 |
<div class="box"> <div class="item">テキスト</div> <div class="item">テキストテキストテキスト</div> <div class="item">テキストテキストテキストテキストテキストテキスト</div> <div class="item">テキストテキストテキストテキストテキストテキスト</div> </div> <!--//box--> |
CSS
|
1 2 3 4 5 6 7 8 9 |
.box{ display: flex; } .box .item{ padding: 15px; background: #43A1AC; color: #FFF; margin-right: 10px; } |
DEMO
Flexboxは一見難しそうですが、とっかかりは意外と簡単です。
例えば要素を横に並べる、となったら今までは子要素に対してfloatやinline-blockなどの指定をかけていました。
Flexboxの場合は、親要素にdisplay: flex;の記述を書いてあげるだけで要素が横並びになってくれます。
今まではjsを使わないといけなかったテキストなどの分量が違う要素の高さを揃えるという面も、現状で解決してくれています。
子要素を同じ割合で並べてみよう
上の画像のように、同じ割合で要素を横に並べてみます。これも簡単にできます。
CSS
|
1 2 3 |
.box .item{ flex: 1; } |
DEMO
前項でご紹介したものに、flex: 1;を追加してみてください。
たった1行だけで要素が1:1の割合で並んでくれます。
子要素を違う割合で並べてみよう
次はこんな感じで2:1の割合で並べてみましょう。
前項からの応用なのでなんとなく察しはつくかなと思います。
HTML
|
1 2 3 4 5 |
<div class="box"> <div class="item w2">ここは2</div>; <div class="item w1">ここは1</div> </div> <!--//box--> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.box{ display: flex; } .box .item{ padding: 15px; background: #43A1AC; color: #FFF; margin-right: 10px; } .box .item.w1{ flex: 1; background: #70A630; } .box .item.w2{ flex: 2; background: #B859A9; } |
DEMO
割合を2にしたいところにはflex: 2;を指定。1にしたいところにはflex: 1;を指定するだけです。
ウィンドウサイズを変えてもずっと割合は保ってくれます。
片方は可変、片方は固定サイズで並べてみよう
最後に、片方は可変、片方は固定サイズで並べてみます。
HTML
|
1 2 3 4 5 |
<div class="box"> <div class="item w1">ここは可変</div> <div class="item w200">ここは200px</div> </div> <!--//box--> |
CSS
|
1 2 3 4 5 6 7 8 |
.box .item.w1{ flex: 1; background: #70A630; } .box .item.w200{ width: 200px; background:#D9A217; } |
DEMO
固定にしたい部分は、px等でサイズを指定。可変にしたい箇所はflex: 1;を指定します。
今まではcalc等を使用していたところがこちらの記述のみで実現できるようになります。
今回はFlexboxの入門という感じでした。
まだ使ったことがないという方の参考になればと思います。
[追記] 新しい記事を書きました。
