flexで要素を横並びにしたときに要素がつぶれたときの対処法

要素を横並びにしたいときによく使う便利なフレキシブルボックスですがflexを使って横並びにしたときに下記の問題が起こるときがあります。

flexを使って横並びにしたときに起こる問題

・画像が小さくなってしまう
・要素が潰れる

たとえば画像に幅をちゃんと指定しているのに片方の要素が伸びてしまい画像が小さくなってしまうといったことが起きることがあります。

対処法は要素に下記のスタイルを追加することで解決できます。

flex-shrink: 0;

原因としてはflexを指定したときのアイテムには初期値としてflex-shrinkが1になってしまうからです。

flexを使ったときにコンテナの幅が収まりきらない場合、flexのアイテムを縮小させる仕様になっているために画像部分が小さくなってしまいます。

もし収まっている場合は画像は小さくならないです。

下記の「 flex-shrink: 0; 」を追加することで解決できます。