DAY37.デザインカンプからコーディング編 ニュース系のコーディング

1.フレックスボックス利用時の注意点

”display: flex;” は中のコンテンツ量に応じて自動で幅を調整してくれる

便利な反面、デザインを再現するときは意図しない幅で設定されてしまう

子要素の幅を指定して制御してあげる必要がある

幅を指定するパターン
・%で指定する方法
・固定値 + calcで指定する方法

%で指定する方法
・可変しても不格好にならないであろう場合
・カード系のコンテンツや画像がベースとなっているコンテンツ

固定値 + calcで指定する方法
・可変すると不格好になってしまうコンテンツがある場合
・改行したくない文字がある場合

width: calc(100% - 固定値);

2.レスポンシブ時の表示について

スマホ時の考え方
・基本は縦並び
・横並びで収まりそうなものは横並びしてあげると収まりがよくなる