flexbox、gridの設計

flex

親要素

• 基本横幅は指定する。（width:100%、max-width: 1200pxなど）
• 一番多いのは、「justify-content: flex-start」。単純な横並びをしたい場合。
• ヘッダーは「justify-content:space-between」で両端にロゴとメニューを寄せるパターンが多い。
• モーダルは「justify-content:center、aligin-items: center」で中央寄せにする。（flexがない時代だと、いちいちネガティブマージンとかで中のコンテンツ量に応じて、marginを設定する必要があった。）
• 横スクロールさせるUI（flex-wrap: nowrap;、overflow-x: auto;）

子要素

• 親の横幅に合わせて流動化させたいので基本横幅はしていしない。
• 一つだけ伸ばす場合はその要素だけに「flex:1;」を使う。
• もし複数要素を均等割りしたい場合はすべての要素に「flex:1」をつける。
• もしロゴなど絶対につぶしたくない要素がある場合は「flex-shrink:0」を使う。（また、入力欄を伸ばして、送信ボタンは固定する場合なども）
• カードなど、特定の子要素だけ固定幅にしたい場合は、「flex-basis:240px」などを使う。

grid

• 業務システムとかであれば、大枠のレイアウトはほぼ今はこれ一択。（grid-template-areasを使うこと。）
• 行と列を固定するので、例えば、５個アイテムがあって、一つだけ改行される場合に、flexみたいにgrowで横に伸びない。（なので、商品一覧とか、写真一覧とかの一覧に向いている。）
• 商品を並べるのは実務では、「display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px;」などと記載する。
• また、基本的には商品カードとか実装する場合はsubgridを検討してもよい。（min-heightとか使わず自然に実装できるため）
• 横幅固定でgapも指定したい場合はflexよりこちらが使える。（flexでやろうとするとflex-basisでcalcなどを指定してやらないといけないため。）