残りの空間を分け合う

01 / 05

余りはどこへ行くのか

display: flex; で並べると、子は中身ぶんの大きさになる。親のほうが広ければ、右側に空間が余るよね。

この余りをどうするかを決めるのが、このレッスンの話だよ。

02 / 05

width: 200px; のように決め打ちすると、

親の幅が変わるたびに書き直すことになってしまう。

03 / 05

子に flex-grow を書くと、余った空間を受け取れる。値は取り分の比だよ。

書くのは子のほう。並べるのは親、伸びるのは子、と覚えよう。

.main {  flex-grow: 1;}

04 / 05

.main が 2、.side が 1 なら、余った空間を 2:1 で分ける。箱の幅そのものが 2:1 になるのではないよ。

書かなかった子は 0 のあつかいで、余りをまったく受け取らない。伸びずにそのままだよ。

.main {  flex-grow: 2;}.side {  flex-grow: 1;}

05 / 05

よく使うのは「ロゴは中身ぶん、あいだを1つだけ伸ばす」という形。伸ばすものを1つ決めるだけで、残りは自然に収まるよ。

ここから書いてみよう。