Flexboxが便利！、floatはどうなってしまうのか！？
先日、神戸のITイベントに行ってきました。
WebデザインやWebフォント、UX/UIに関することなどを詳しく聞くことができいい勉強になりました。
目次
floatとdisplay
例えば次のように2つの要素が縦に並んでいたとします。親要素であるcontainerの中に、子要素のbox1とbox2があります。
これを横に2つ並べたいとき、今までなら子要素のbox1とbox2に
.box1, .box2 {
float: left
}
.box1, .box2 {
display: inline-block;
}
このようにfloatやdisplayプロパティを使っていました。
floatはfloatした次の要素に
footer {
clear: both;
}
親要素に
.container {
overflow: hidden;
}
または
.container:after {
content: " ";
clear: both;
display: block;
}
を指定します。
floatで並べるのが一般的ですが、floatしただけは親要素が幅と高さを失うのとfloatした次の要素をクリアしないといけないですね。
display: inline-block;は要素と要素の間に意図しない余白ができるのが問題ですね。
なので親要素に
.container {
letter-spacing: -1em;
}
子要素に
.box1, .box2 {
letter-spacing: 0em;
}
というようにletter-spacingプロパティを使って余白をなくしていました。
Flexbox
そこで便利なのがFlexboxです。
これはCSS3で新しく追加されました。対応ブラウザがIE11以降、Androidは4.4以降でないと対応していないなど、今のところバンバン使っていこうという段階ではないとおもいます。
Flexboxはとても簡単です。
まず親要素に
.container {
display: flex;
}
と指定します。これで親要素はFlexコンテナー、子要素はFlexアイテムになります。
Flexboxのスゴイところは、ブラウザを伸縮させてもらうとわかります。
なんと親要素の幅に合わせて子要素も伸縮します！
更にFlexboxのプロパティを、FlexコンテナーとFlexアイテムに指定することで並び順などのレイアウトを自由に変えることができるのです。
では、Flexboxのプロパティを見ていきましょう。
Flex コンテナーに指定するもの
flex-direction (並ぶ方向を決める)
row
初期値です。左端から右に並びます。
row-reverse
右端から左に並びます
column
縦並びになります。
column-reverse
縦並びで順序が逆になります。
flex-wrap (子要素の幅が、親要素の幅を越えた場合折り返すかどうか)
no-wrap
初期値です。折り返しません。
wrap
折り返します。
wrap-reverse
折り返して順序が逆になります。
justify-content (水平方向の位置を決める)
flex-start
初期値です。横並びは左揃え、縦並びは上揃えになります。
flex-end
横並びは右揃え、縦並びは下揃えになります。
center
真ん中に揃います。
space-around
両端に余白をあけて均等に並べる。
space-between
両端に余白をあけないで均等に並べる。
Flexアイテムに指定するもの
flex (flex-grow,flex-shrink,flex-basisのショートハンド)
flex-grow
Flexアイテムの伸び率を数字で指定します。
flex-shrink
Flexアイテムの縮み率を数字で指定します。
flex-basis
Flexアイテムのベースとなる長さを指定します。autoと指定すると要素の長さがベースになります。
flexはややこしいので、プレビューを自分で比較しながらの方が分かりやすいと思います。
flex-growは、box1が1、box2が3、box3が1です。
flex-shrinkは、box1が1、box2が2、box3が3です。
flex-basisは、すべて200pxで指定しています。
実際にブラウザを伸縮させてもらうと分かるのですが、
ブラウザを伸ばしたときは、box2の幅だけ大きくなります。ブラウザを大きくすればするほど違いがわかると思います。
逆にブラウザを縮めると、box1が一番大きく、box3が一番小さくなります。
感想
Flexboxはブラウザのバージョンなどの対応の問題がありますが、
メディアクエリーを使わなくても、横並びや縦並びのレイアウトがを簡単にできるところが魅力的です。
レスポンシブで使えそうです。
覚えるプロパティはflexだけ少しややこしいですね。
それでも複雑なレイアウトがやりやすくなったところは良いですね。
親要素のサイズを気にしなくていいというのは、大きいです。
floatだと子要素の幅が、親要素の幅をこえるとレイアウトが崩れてしまいますが、
そういったことも気にしなくていいのはありがたいですね。
