flexbox便利ですね。カチッと指定しなくても良い感じになってくれるし、適当にやってもなんとなくうまいこと並ぶし。
中にどんな大きさの画像やテキストが入るかわからない要素をレイアウトするときなどに重宝します。
が。時にflexboxには深い闇が潜んでおります。
flexアイテムとして指定したimgタグの縦横比を固定するために安易にheight: 100%などと指定してはなりません。
一見問題なく縦横比が固定されたように見えますが、真の恐怖は遅れてやってくるのです。
それはリモート環境でのみ起こる…再現性の低いバグ…
PCのChromeとSafariでのみ、ページを開いたときに画像が表示されたり……されなかったり……
画像データはロードされ、そこにあるはずなのに、imgタグのheightが0となっていて表示されない…
そんなことが起こります。
Flexアイテムに指定したimg要素の高さが伸びたりするのは、flexコンテナのalign-itemsがデフォルトでstretchになっているからです。
これをflex-startなり、centerなりの適当な値にセットしてあげると縦横比は崩れず表示されます。
仕組みを理解して使えばとても便利なFlexbox… ご利用は計画的に…(2日間悩みました)