Flexboxと仲良くなる(その1)

TechAcademyでメンターをしています

CSS3になって登場したFlexboxの考え方ですが、初心者にはまだまだ難しい感覚がある様で、よく引っかかるという話を聞きます。
折角登場した使い勝手のいいプロパティですので、使いこなすために必要そうな情報をまとめていきたいと思います。

この記事の目次

Flexboxで出来ること

Flexboxで出来ることとしては、横並びが有名ですが、縦並びも可能です。よく比較される float との違いとしては、floatが 回り込み を表現するのに対して、Flexboxが フレキシブルにコンテンツを収める という動きをする点が異なります。

floatで横並びにするとき

float に慣れている皆さんが多いと思うのですが、逆の方もいらっしゃいますし、敢えてここでは float との比較をしてみましょう。

float を使うというと、以下のようなコードを書くことが多い気がします。

.float {
    float: left;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

float: left; を使う事で、対象を左に置き、他の要素に回り込んでもらい、最終的に横並びしているように見せ、 .clearfix を利用して余計な要素を作らないようにしながら、疑似要素 ::afterclear: 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.box21 : 2 の割合で使われている事になるわけです。 比率として覚えておくと良いのでは無いでしょうか

コレはシンプルに flex-grow のみを指定した場合の話です。もし、 flex-basis と併用するとどうなるかというと、 余ったエリアをどういう割合で配分するか の値として扱われます。コレが指定されていると、残ったスペースをどう使うか問題が解消出来ますね。

flex-shrink

コレだけだと使われることは無いような気がします。

growとは逆のことが出来ます。 どれだけ要素を縮めるかを指定する物 ということです。足りなくなったときにどのように削るのか…というイメージですね。数字が大きい物ほど削られやすいです。マイナス方向のイメージで考えましょう。

正直なところコレを使うシーンに行き当たったことがないので、あまりよくわからないです…。メリットがある点ってあるのかな…。どなたか教えて下さい。

まとめて書けるよ

コレだけいろいろあるのですが、まとめて書くことも出来ます。

.flex {
    display: flex;
}

.box {
    flex: 1 1 70px;
    /* 指定する順番は grow shrink basis の順番 */
}

3つ数字が並んでいるサンプルがあったりするのはそういうことだったんですね。

とりあえずこれで使える

とりあえず横並びにするとかそういうこととかは割とコレで出来そうな気がしてきませんか? 実際、コレだけでも充分使えると思います。

次回はコレに加えて、位置の調整やバランスの調整など、更に便利にしていく術をまとめていこうと思います。

この記事を書いた人

ささぴよ

TechAcademy公認エバンジェリスト
株式会社シノビアシ 取締役副社長 兼 CTO

中学時代に買ってもらったPerforma 550以降ずっとアップル製品漬けの人生。iPhoneは日本上陸時から愛用し続けている。
「誰かが作っているなら、自分でも作れるはず!」という安易な発想からHP制作などを始め、ネットの世界から情報を集めてひたすらいろんなことをやってみるようになった。

TechAcademyでは、Webデザイン / WordPress / UI/UX / Node.js / OSS活動 / デザイン実践ポートフォリオ / フリーランスサポートのコース を担当するメンター。

よく歌って踊っている。