display flex で子要素の高さを揃えない方法
![](https://tamiblog.xyz/wp-content/uploads/2021/02/無題535-5.png)
display flex を使った場合、デフォルトでは以下のようにAAAとCCCも、BBBの高さに揃います。
![](https://tamiblog.xyz/wp-content/uploads/2021/02/image-1024x463.png)
高さを揃えたくない場合は、align-items: baseline; を指定します。
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<div style="background: #ccc;">
AAA
</div>
<div style="background: #ccc;">
BBB<br />BBB
</div>
<div style="background: #ccc;">
CCC
</div>
</div>
![](https://tamiblog.xyz/wp-content/uploads/2021/02/image-1-1024x164.png)
最近のコメント