コーディングには必要不可欠なぐらい多様しまくってる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; }
HTMLの記述で対処方法
いや、デザイン的に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さん、その他のブラウザを作ってる会社さん、いつもありがとうございます。
コメント