左側
右側
See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.
cssのflexboxって便利だけど、なかなか使いこなすのが難しいです。
前々から２カラムで右側は最小限の幅、左側は残り全てってレイアウトすること多かったんですけど、
flex-boxだとできないと思っていたんですよ。
ところがある時、こうすればできるじゃんってのが見つかりまして。
どうするかというと、flex-growを使うんですね。
片方にはflex-grow:1を指定して、もう片方は指定しない。
そうすると指定しないほうが最小サイズに、指定したほうが残り全てになります。
こんな感じに。
いつも面倒くさくなってfloatかtable使っちゃうんだけど、これならflexに統一できますね。
cssはまだまだ色々なハックがあるから常に学ばないとあかんですなあ。
仕事じゃ常に使う技術だし。
ちなみにflex系cssはパラメータが多すぎてすぐわけわからなくなるって人のために、
codepenでいいところ見つけたので紹介。