フレックス
flex-grow 余った幅を子に分配する
意味
親に余った幅を、その子へどれだけ渡すかを決める場合に使います。初期値は 0(余っても伸びない)です。1 同士なら、余りを同じ割合で分けます。
縮む量は flex-shrink です。まとめて書く場合は flex です。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<div class="row">
<span>そのまま</span>
<span class="grow">余りをもらう</span>
</div>.row {
display: flex;
gap: 0.4rem;
}
.row > span {
background: #efeef8;
padding: 0.4rem 0.65rem;
}
.grow {
flex-grow: 1;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 29〜 |
| Firefox | 20〜 |
| Safari | 9〜 |
| Edge | 12〜 |
| Chrome Android | 29〜 |
| Safari iOS | 9〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)