safariとかで画像が下に伸びる現象が起きたらflexboxを見直すんだ

コーディングには必要不可欠なぐらい多様しまくってるflexbox。
昔のようにfloatをいっぱい使っていた頃には、もう戻れないよ。

そんなflexbox、safariブラウザで確認すると画像が伸びる場合があります。

スポンサーリンク

どういう場合に画像が伸びる?

おそらくsafariだけ?他のブラウザでは確認できませんでしたが、スタイルの性質上、発生してもおかしくないと思います。
特に以下のようなHTMLだと起きやすいかもしれません。

<div class="flex">
  <img src="img1.png" alt="" >
  <img src="img2.png" alt="" >
</div>

CSS対処方法

そんな時は、flexboxを設定している要素に以下の内容を追加すれば対処できます。

align-items: flex-start;

以下のような感じです。

.flex{
  display: flex;
  align-items: flex-start;
}

まとめ

画像のサイズによっては、パッと見、気づかないかもしれません。
過去に対応した内容をsafariで確認してみてはいかがでしょうか。

そろそろ、ブラウザ統一の条例とか法律とか決まりを作って欲しいです。。。
昔に比べれば全然マシですが、作る側が表示を合わせるのではなく、ブラウザ作ってる会社が合わせてよ!

スポンサーリンク
CSS
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました