使い分けるとコードがすっきりする。
flex
- 縦一列、横一列などの一方向の並びに強い。
- 例：ナビゲーションを並べる。
flex:1
- display:flexを親に使ってる子要素に対して使う。
- 残りの幅をすべて取りたい場合に使う。（画像とテキストが横並びになってて残りを使いたい場合など）
- 親要素の幅が変わっても可変して対応してくれるので便利。
grid
- 縦横二方向の並びに強い。
- 例：カード型のコンテンツを縦横に並べるときに使う。
flexとgridの使い分けなどの設計
07.26
この記事は1分で読めます
関連記事
この記事へのトラックバックはありません。
この記事へのコメントはありません。