## 対象記事
<div class="link-card">
<div class="link-card-header">
<img src="https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_32,h_32/https://zero-plus.io/media/wp-content/uploads/2021/12/
[email protected]" class="link-card-site-icon"/>
<span class="link-card-site-name">ZeroPlus Media - 完全0から始める Webデザイン/プログラミング -</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説 | ZeroPlus Media</p>
<p class="link-card-description">flex-grow は、flexアイテムの比率を指定できるプロパティです。flexアイテムの伸長を width ... </p>
</div>
<img src="https://zero-plus.io/media/wp-content/uploads/2022/04/flex-grow.png" class="link-card-image" />
</div>
<a href="https://zero-plus.io/media/flex-grow-how-to-use/"></a>
</div>
[[flex-grow属性]]の使い方に関する記事。
## flex-growの性質
> flex-grow は、flexアイテムの比率を決めるプロパティです。flexコンテナ内に余白があるとき、余白部分をflexアイテムに指定した比率の分だけ追加します。
[[flex-shrink属性]]は親要素をはみ出たときだったけど、[[flex-grow属性]]は親要素が埋まりきらなかったときなのか。
### flex-growを指定しない場合
```html
<div class="flex w-[600px] bg-stone-300">
<span class="w-[100px] bg-red-200">200px</span>
<span class="w-[100px] bg-red-200">200px</span>
<span class="w-[100px] bg-red-200">200px</span>
</div>
```
[[Chrome devtools]]で確認すると...
![[Pasted image 20240810161224.png|frame]]
勝手に親要素の分だけ伸びたりはしない。
### flex-growを指定する場合
```html
<div class="flex w-[600px] bg-stone-300">
<span class="w-[100px] flex-grow bg-red-200">200px</span>
<span class="w-[100px] bg-red-200">200px</span>
<span class="w-[100px] bg-red-200">200px</span>
</div>
```
1つ目が`400px`まで伸びた。
![[Pasted image 20240810161435.png|frame]]
[[Chrome devtools]]にも`100px`と伸びた分の`300px`が表示される。
> 初期値は0で、負の値や少数の指定も可能です。
[[flex-shrink属性]]はデフォルトが1だったが、[[flex-grow属性]]は0がデフォルトらしい。
[[flex-grow属性]]が余白部分を埋める比率であることに着目し、違う指定をしてみる。
```html
<template>
<div class="flex w-[600px] bg-stone-300">
<span class="w-[100px] flex-grow bg-red-200">100+30px</span>
<span class="w-[100px] grow-[3] bg-blue-200">100+90px</span>
<span class="w-[100px] grow-[6] bg-green-200">100+180px</span>
</div>
</template>
```
余白の`300px`を`1:3:6`の割合で分割し、それぞれの要素に付与される。
![[Pasted image 20240810162104.png|frame]]
## まとめ
- **余白をフルに使いたい場合は `flex-grow`クラス を指定する**