## 対象記事
<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-basisの使い方を解説！widthやheightとの違いは？ | ZeroPlus Media</p>
<p class="link-card-description">flex-basis は、flexアイテムの大きさを指定できるプロパティです。上手に使いこなせばCSSの記述を</p>
</div>
<img src="https://zero-plus.io/media/wp-content/uploads/2022/05/flexbox-flex-basis-%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-basis-how-to-use/"></a>
</div>
## flex-basisの性質
> flex-basisは、flexアイテムの大きさを指定するプロパティです。
めっちゃ大事そう。`width`とかで指定するわけではないのか...。
### flex-basisとwidthを組み合わせて指定してみる
興味深い記述。
> flex-basis と width を併用したときは flex-basis の値が優先されることに注意しましょう。基本的に flex-basis と width に違いはないため、どちらかのプロパティを使用しましょう。
たまに[[Flexbox]]の横幅が変更できないのは、もしかしたこれなのか..?
```html
<div class="flex w-[600px] bg-stone-300">
<span class="w-[100px] bg-red-200">100px</span>
<span class="basis-60 bg-blue-200">240px</span>
<span class="w-[100px] basis-60 bg-green-200">100px or 240px ??</span>
</div>
```
たしかに`width` (`w-[100px]`) より`flex-basis` (`basis-60`)が優先されている...。
![[Pasted image 20240810163003.png|frame]]
*`basis-60` は `240px`*
なお、初期は `basis-auto`。
## まとめ
- **widthを指定しても横幅が変わらないときは `basis` の設定がされていないかを疑う**