🕌

flexとgridの違いと使い分け

2024/01/21に公開

何かを並べるときに便利なのが、かつてはflex(Flexbox)でしたが、gridが登場してからというものgridのお世話になってばかりいます。

とはいえ、flexだからこそ出来ること、gridにもデメリットがあるので覚書きとして残しておきます。

flexboxとgridの使い分け

・シンプルな一行の横並び
・シンプルな一列の縦並び
・要素を真ん中におく
・要素の数が増えたり減ったりするもの
・要素の表示で折り返しが出てくるもの
・要素を両端ぞろえにするもの

具体的には？
・ボックスの真ん中に文字を置く
・SNSアイコンを並べる
・ナビゲーションバー
・フッター
・タグ一覧
・ブログ記事を並べる

・グリッドデザイン
・列数、行数や配置するものが決まっているレイアウト
・ページ全体のレイアウト

具体的には？
・ページ内にヘッダー・メイン・サイドバー・フッターをセクションとして配置する
・ポートフォリオとして作品画像を並べる

・雑誌のような複雑な配置

・要素が増えたり減ったりするもの

flexboxとgridはデザインにおいて同時に使えます。
例えば、全体のレイアウトにgridを使用し、コンポーネントやセクションの内部レイアウトにはflexboxを使うといったことができます。