display:flexにしたら良きに計らえすぎて画像の幅とかが意図したより小さくなることがある

display:flexでレイアウトを横並びにするのはとても助かる機能なので利用しています。

が、今回画像とテキストが横並びになるレイアウトでテキストが多めの時に画像幅が勝手に狭くなる現象に遭遇。
画像のwidthを指定してもダメで困っていたが、以下の方法で対応可能。

子要素にflex:noneを指定すると下手な気遣いが減って画像幅を担保してくれました!
今回はimg側に上記CSSをあてました、

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です