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

コーディングには必要不可欠なぐらい多様しまくってる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;
}

いや、デザイン的にCSSの display: flex; に align-items: flex-start; 使いたくないんだよね。。
って方もいると思います。

その場合は、下記のように画像(imgタグ)をdivとかの要素で囲ってあげると対処できます。

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

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

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

って思いますが、Googleさん、Appleさん、その他のブラウザを作ってる会社さん、いつもありがとうございます。