safari flex box での画像アスペクト比問題の対処

flex boxのこ要素にimgがある場合、safariだと縦にびよーんと伸びてしまったりすることがある。

原因は flex の align-items のデフォルトが stretch なためで、縦にストレッチしちゃう。

なので、

align-items:flex-start;

とするのがよい。
場合よってはflex 親要素に追加で

height:auto;

が必要かも。

align-itemsの詳細はこちらのページがわかりやすい。いまだに見ている…ありがたや。

カテゴリー: html + css   作成者: hello パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA