flexで右側だけ固定させるにはfrex-grow:1を使おう

Author:

cssのflexboxって便利だけど、なかなか使いこなすのが難しいです。
前々から2カラムで右側は最小限の幅、左側は残り全てってレイアウトすること多かったんですけど、
flex-boxだとできないと思っていたんですよ。
ところがある時、こうすればできるじゃんってのが見つかりまして。

どうするかというと、flex-growを使うんですね。
片方にはflex-grow:1を指定して、もう片方は指定しない。
そうすると指定しないほうが最小サイズに、指定したほうが残り全てになります。

左側
右側

こんな感じに。

いつも面倒くさくなってfloatかtable使っちゃうんだけど、これならflexに統一できますね。
cssはまだまだ色々なハックがあるから常に学ばないとあかんですなあ。
仕事じゃ常に使う技術だし。

ちなみにflex系cssはパラメータが多すぎてすぐわけわからなくなるって人のために、
codepenでいいところ見つけたので紹介。

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

Facebook にシェア
Pocket