2021年4月17日スポンサーリンクflexboxで画像を横並びにしたところ、タイトル画像のように画像が縦に伸びるという現象が起きました。問題が起きた当時の状況としては、パソコン上でブラウザのサイズを変えてデザイン確認を行った問題なかったので、GitHubで静的ページを公開したその後、自分のスマホで確認したところ、画像が縦に伸びていたこんなかんじです。「パソコンでブラウザのサイズを変えて確認したんだけどな...」と思いつつ、ググったら原因が分かったのでまとめます。30%;}こんなかんじです。親要素(div)にflexboxを指定した子要素(img)に画像を入れて、サイズ指定(30%)を行ったこんな内容です。「flexboxの仕様上、子要素に直接画像を入れると、スマホ版のsafariでは画像が縦に伸びる」ということらしいです。画像をdivで囲う画像を囲ったdivにサイズ指定(今回の場合なら30%)を行うその上で、画像自体には100%のサイズ指定を行うこんなことが効果的だそう。100%;}こんなかんじに修正したところ、無事にデザインも修正されました。まとめflexboxは今回のバグ以外にも、いくつかバグが起きるポイントがあるみたいですね。Qiitaflexbox使ってますか?バグつらいですね。必死に組んだレイアウトがIE11で崩れる様を見て、膝から崩れ落ちたことは何度もあります。Flexboxの作者でもある、philipwaltonさんのflexbu...「複数ブラウザでのチェックは必須だよ~」と聞いたことがありますが、まさにそのことを痛感した出来事でした。最後に余談ですが、僕は一つだけ自慢できることがあります。妻子持ちブラック企業というハードモードの中、スクールには通わず、半年の独学で上場企業から内定したことです。チュートリアルなど、いわゆる「王道」の教材も使いましたが、一番参考になったのはUdemyで買った動画教材。CSSやJavaScriptの学習で参考になった教材がコチラです。専門書よりも安く買えるので、お試し購入がしやすいスマホから動画で学べるので、通勤中や昼休みにも勉強できるなど、独学者にはかなりオススメのコンテンツです。いわゆる初心者の勉強を終えた後のレベルアップ方法って悩みますよね。筋トレとブログと家族を愛しています。毎朝2時から勉強をして、独学半年で未経験からWeb系自社開発企業から内定をもらいました。