HANT blog

リアルタイム動画アンケートサービスHANTのブログ

flex-itemを改めて復習する。

フロントエンドエンジニアの山本です。

flexbox、本番環境でも使えるようになってきてますね。
弊社でも去年の中頃から積極的に使っていますが、理解が雑だったので度々はまってました。

flex-container用のjustify-contentとかのプロパティはシンプルなので、覚えやすいのですが、 flex-item用のプロパティは挙動に驚くことが。

例えば、flex-item内のテキストが改行してくれなかったりとか...

そこで苦手なflex-itemのflexプロパティ(flex-basis, flex-glow, flex-shrink)を腰を据えて復習しまして、けっこうすっきりできたのでまとめました。


1. flex-basisはflex-item(以下アイテム)の基本サイズを定義するプロパティ

2. flex-glow / shrink はflex-container(以下コンテナ)と各アイテムの基本サイズの総量との差の分のスペースをどう伸縮させるか定義するプロパティ

  • flex-glowはアイテムの基本サイズの和がコンテナのサイズより小さい場合、どのアイテムをどのくらい伸ばすか定義する。

f:id:HANT-official:20160916122016p:plain

  • flex-shrinkはアイテムの基本サイズの和がコンテナのサイズより大きい場合、どのアイテムをどのくらい縮めるか定義する。

f:id:HANT-official:20160916122022p:plain

3. flex-basisが0の時は基本的なサイズが0になるため、flex-glow/shrink がアイテムのサイズに直結する。

  • w3cの勧告内ではflex-basisがautoの時を'相対的'と呼び、0の時を'絶対的'と呼んでいる

flex-glowは伸びでflex-shrinkは縮みと表面的にしか理解できていなかったので、これで随分すっきりしました。

ここからはよくあるケース。

よくあるケース1 片方のアイテムの幅は決まっているけど、もう片方は決まっていない。

この場合、幅の決まっているアイテムにはflex: 1 0 ${アイテムの幅} にして、決まっていない方は flex: 0 1 autoにすると、

See the Pen flex-itemよくあるケース(1) by takumi yamamoto (@tqmyaml) on CodePen.

「なんで改行がされないんだ...」となることはもうありませんね^^

よくあるケース2 アイテムの総数が場合によるけど、折り返さず、各アイテムの幅を等しく

flex-basisをautoにしてしまうとアイテム内のコンテンツの量によって伸縮してしまうので、flex: 1 0 0 を各アイテムに指定します。

See the Pen flex-itemのよくあるケース(2) by takumi yamamoto (@tqmyaml) on CodePen.

全部同じ幅にすることができました^^

flexやっぱり便利ですねー
これからはさらにサクサク書けそうです!

参考:
CSS Flexible Box Layout Module Level 1 (日本語訳)
CSS Flexible Box Layout Module Level 1