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

2020.08.05 2020.08.03

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

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

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

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

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

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

align-items: flex-start;

以下のような感じです。

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

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

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