## 対象記事
<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-shrinkでflexアイテムを縮小させる方法を解説 | ZeroPlus Media</p>
<p class="link-card-description">flex-shrink は任意のflexアイテムを縮小させるプロパティです。flex-shrink を使用すれ</p>
</div>
<img src="https://zero-plus.io/media/wp-content/uploads/2022/05/flexbox-flex-shrink%E3%83%95%E3%82%9A%E3%83%AD%E3%83%8F%E3%82%9A%E3%83%86%E3%82%A3%E8%A7%A3%E8%AA%AC%E8%A8%98%E4%BA%8B.png" class="link-card-image" />
</div>
<a href="https://zero-plus.io/media/css-flex-shrink-how-to-use/"></a>
</div>
[[flex-shrink属性]]の使い方に関する記事。
## flex-shrinkの性質
> flexアイテムには親要素の幅を超えるときに均等な幅となる性質があります。そこで flex-shrink を使用すれば、親要素の幅からはみ出た部分を縮小することができます。
なるほど。試してみる。
### flex-shrinkを指定しない場合
```html
<div class="flex w-[480px] bg-stone-300">
<span class="w-[200px] bg-red-200">200px</span>
<span class="w-[200px] bg-red-200">200px</span>
<span class="w-[200px] bg-red-200">200px</span>
</div>
```
これを[[Chrome devtools]]で確認すると以下のようになる。
![[Pasted image 20240810154743.png|frame]]
ここから2つのことが分かった。
- 本来`200px`と指定したが`160px`になってしまった (親の480px / 3)
- 欠落した`40px`も[[Chrome devtools]]には表示される
### flex-shrinkを指定する場合
以下いずれの指定においても変化はなかった。
```html
<div class="flex flex-shrink w-[480px] bg-stone-300">
```
```html
<div class="flex flex-shrink-0 w-[480px] bg-stone-300">
```
あれ...。何か勘違いしてる?
> flex-shrink はflexアイテムに対して有効なプロパティであるため、親要素に display: flex; を、子要素に flex-shrink をそれぞれ指定します。
なるほど。親ではなくて子に設定する...と。
```html
<div class="flex w-[480px] bg-stone-300">
<span class="w-[200px] flex-shrink bg-red-200">200px</span>
<span class="w-[200px] bg-red-200">200px</span>
<span class="w-[200px] bg-red-200">200px</span>
</div>
```
この指定は変化なかった。これがデフォルトなのかな?
> 初期値は 1 で、マイナスの値は指定できません。
どうやらそうらしい。次は、`flex-shrink-0`を指定してみる。
```html
<div class="flex w-[480px] bg-stone-300">
<span class="w-[200px] flex-shrink-0 bg-red-200">200px</span>
<span class="w-[200px] bg-red-200">200px</span>
<span class="w-[200px] bg-red-200">200px</span>
</div>
```
指定した要素は幅が指定したとおり `200px` になった。
![[Pasted image 20240810155655.png|frame]]
他の要素は残りのサイズ `240px (480 - 200)` を均等に割った値 `120px` になる。
![[Pasted image 20240810155828.png|frame]]
## まとめ
- **指定したサイズを死守したい要素は `flex-shrink-0`クラス を指定する