レスポンシブで大活躍のflexboxを使い倒す(後編)

Pocket

flexboxについての続編です。
flex-growやflex-shrinkの設定方法でちょっとつまったので、今回もサンプルをいくつか用意してみました。

flex-basis

基準となる幅を指定できます。
親要素に対して小さい値を設定すると隙間はできますが、大きい値を入れても突き破ることはないです。
2段などにさせたい場合はflex-wrap: wrap;を指定すればいいのですが、その場合2段目以降は100%より小さくても親要素にぴっちりなります。

See the Pen GJBJdM by matsui (@matsui) on CodePen.

flex-grow

フレックスアイテムがフレックスコンテナ内で、余裕がある場合どれだけ大きくなるかの割合を指定できます。

See the Pen aOjyKR by apct (@apct) on CodePen.

flex-shrink

フレックスアイテムが他のフレックスアイテムに比べて、どれだけ縮めるかの割合を指定できます。
flex-shrinkを使うときはflex-basisで基準となる幅を一緒に書く必要があります。
初期値は1で、0を指定すると縮まないということなので、flex-basisの合計値が親要素より大きいと突き破る形になります。

See the Pen waEEGL by matsui (@matsui) on CodePen.

flexのショートコードについて

書き方はflex-glow,flex-shrink,flex-basis という風にしてまとめて書けます。
flex: (flex-glow) (flex-shrink) (flex-basis);

flex-shrinkを省略したり、flex-shrinkとflex-basisの値を入れ替えて書いてもOKです。

右端や下端、上下左右中央に寄せたいとき

marginにautoを入れると楽に実装できます。
ちなみにflexboxはmarginの相殺というものがないので、縦積みにするときのmargin幅には注意が必要です。

See the Pen eNLjPp by matsui (@matsui) on CodePen.

画面幅でレイアウトを変更

orderで順番を変更したり、flex-flow: column を使えばさくっとレイアウト変更できます。

See the Pen BNOOYa by matsui (@matsui) on CodePen.

まとめ

flex-growやflex-shrinkはいくつかサンプルを作ってみてなんとな〜く幅の計算方法などが理解できるようになった気がします。
flexboxについては今まで結構勘でいじっていたところがあるのですが、これとこれを組み合わせるとこうなるというパターンができるというのが以前よりもはっきり見えてきたように思います。

今回ブログを書くにあたってW3Cのページを改めて読んでみたり、いろんなプロパティを自分なりにいじってみて良い勉強になりました。
他にも自分の中で怪しいCSSがいくつかあるので、また今度解剖していけたらなと思います。

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。