CSS3になって登場したFlexboxの考え方ですが、初心者にはまだまだ難しい感覚がある様で、よく引っかかるという話を聞きます。
折角登場した使い勝手のいいプロパティですので、使いこなすために必要そうな情報をまとめていきたいと思います。
この記事の目次
Flexboxで出来ること
Flexboxで出来ることとしては、横並びが有名ですが、縦並びも可能です。よく比較される float
との違いとしては、floatが 回り込み を表現するのに対して、Flexboxが フレキシブルにコンテンツを収める という動きをする点が異なります。
floatで横並びにするとき
float
に慣れている皆さんが多いと思うのですが、逆の方もいらっしゃいますし、敢えてここでは float
との比較をしてみましょう。
float
を使うというと、以下のようなコードを書くことが多い気がします。
.float { float: left; } .clearfix::after { content: ""; display: block; clear: both; }
float: left;
を使う事で、対象を左に置き、他の要素に回り込んでもらい、最終的に横並びしているように見せ、 .clearfix
を利用して余計な要素を作らないようにしながら、疑似要素 ::after
で clear: both;
するという方式です。 clearfix
はよく知られていますが、その書き方もいろいろなパターンがあります。どれを使ってもいいのですが、コレが一番スマートに書けていると思っています。
回り込みであれば、当たり前ながらこの方法しかありません。
逆に横並びをするときにも使えるのですがデメリットがあるわけです。デメリットは以下の通り。
- 必ず
clearfix
しないと表示が崩れる場合があるので繊細である。 - 複数の
float
された要素を並べたときに高さを揃えられない。 - 横幅をうまくコントロールして横並びの間隔を整えることが難しい。
特に高さ問題は、昔からコーディングをやっていた方には苦戦した記憶の多い部分ですね。
デザイナー・クライアント 高さ揃ってないですねー。揃えて下さい。
コーダー 知るかボケ! 高さ決めろや!(#゚Д゚) プンスコ!
こんなやり取りがたくさんありました。なつかしい。
そんな時代を超えて、生まれたのがFlexboxなわけです。
Flexboxの基本
Flexboxの基本としては、親要素が必要であり、それに対して flex
を指定するという事です。横並び・縦並びにしたい物を一式まとめて何かの要素に入れておく必要があるという事です。
親要素に指定するべきCSSはこちら。
.flex { display: flex; }
コレだけでFlexboxにする準備は整いました。
子要素に何をすれば良いかというと、親要素の中でどうあって欲しいかという部分を指定することになります。分解していきましょう。
Flexboxに使うプロパティ
flex-basis
本当ならコレを最後に持ってくるべきなのですが、ここで最初に説明しないとわかりづらくなるので、コレを最初にお話ししましょう。
いわゆる、横幅(縦向きに使うときには縦幅)の指定です。単位付きの数値を指定して、この要素がどれだけ横幅を使うのかということを指定します。
.flex { display: flex; } .box { flex-basis: 50px; }
この様に書くと .box
要素は全て 50px
の横幅で並ぶことになります。シンプルですね。
flex-grow
一番よく使われる上に、一番伝わりにくいのがコレです。単位のない数値を使うので意味がわからないということだと思います。役割としては どれだけ要素を伸ばすかを指定する物 です。
何にせよ、百聞は一件にしかずということで、この例をみてみましょう。
.flex { display: flex; } .box1 { flex-grow: 1; } .box2 { flex-grow: 2; }
この例では .flex
の内側で .box1
と .box2
が 1 : 2
の割合で使われている事になるわけです。 比率として覚えておくと良いのでは無いでしょうか 。
コレはシンプルに flex-grow
のみを指定した場合の話です。もし、 flex-basis
と併用するとどうなるかというと、 余ったエリアをどういう割合で配分するか の値として扱われます。コレが指定されていると、残ったスペースをどう使うか問題が解消出来ますね。
flex-shrink
コレだけだと使われることは無いような気がします。
growとは逆のことが出来ます。 どれだけ要素を縮めるかを指定する物 ということです。足りなくなったときにどのように削るのか…というイメージですね。数字が大きい物ほど削られやすいです。マイナス方向のイメージで考えましょう。
正直なところコレを使うシーンに行き当たったことがないので、あまりよくわからないです…。メリットがある点ってあるのかな…。どなたか教えて下さい。
まとめて書けるよ
コレだけいろいろあるのですが、まとめて書くことも出来ます。
.flex { display: flex; } .box { flex: 1 1 70px; /* 指定する順番は grow shrink basis の順番 */ }
3つ数字が並んでいるサンプルがあったりするのはそういうことだったんですね。
とりあえずこれで使える
とりあえず横並びにするとかそういうこととかは割とコレで出来そうな気がしてきませんか? 実際、コレだけでも充分使えると思います。
次回はコレに加えて、位置の調整やバランスの調整など、更に便利にしていく術をまとめていこうと思います。