コーディングには必要不可欠なぐらい多様しまくってる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で確認してみてはいかがでしょうか。
そろそろ、ブラウザ統一の条例とか法律とか決まりを作って欲しいです。。。
昔に比べれば全然マシですが、作る側が表示を合わせるのではなく、ブラウザ作ってる会社が合わせてよ!
コメント