👻

【CSS】flex or grid

2024/03/25に公開

この記事は、僕が普段 flexとgrid の使い分けで気を付けていることのまとめになります。

flex：子要素のサイズに合わせたい場合

grid：子要素のサイズを一定にしたい場合

flex を使うタイミング

flex は、子要素自身でサイズを定めたい場合に使用します。

子要素でサイズを定めることで、無駄な余白・折り返しを防げるからです。

例えば、ナビゲーションメニューのような場合です。

この場合、テキストごとにサイズが異なるため、柔軟な幅を設定することが求められます。

もし、gridを利用してしまうと、定めたサイズ内にテキストが留まろうとするため、折り返しが発生する可能性があります。

しかし、flexの場合は、テキストのサイズに合わせて動くため、テキストの折り返しが発生しません。

こういったナビゲーションメニューのように、子要素自身でサイズを定めたい場合はflexを使っています。

gridは、親要素で子要素のサイズを定めたい場合に使用します。

親要素で指定することによって、子要素ごとのサイズの調整が簡単に行えるからです。

例えば、カードリストのような場合です。

この場合、カードごとに均等なサイズを割り当てることが求められます。

もし、flexを利用してしまうと、指定していない場所で折り返したり、折り返し後のサイズが合わないといった問題が発生します。

しかし、gridの場合は、カードのサイズが定められているため、折り返しやサイズの不適合が発生しません。

こういったカードリストのように、子要素のサイズを一定にしたい場合は、gridを使っています。