CSSのdisplay:flex で幅（width）の指定が効かない時の対処法

こんにちは。

display:flex（flexbox）で要素を横に並べた際に、幅を指定してもその通りにならないと困っていませんか？
本記事では、CSSのdisplay:flexで幅（width）の指定が効かない時の対処法を解説していきます。

CSSのdisplay:flex で幅（width）の指定が効かない時の対処法

実はこの現象、とあるプロパティを一つ加えるだけで簡単に解決できちゃいます。

そのプロパティが flex-shrink です。

結論から言うと、flex の小要素に、このflex-shrinkの値を0に指定するだけで解決することができます。

.element{
    flex-shrink: 0;
}

flex-shrink は、display: flex にした要素がもつ小要素の縮小率を表しています。
数字が大きいほど縮小率が上がるため、小さくなります。
flexboxはコンテナ内に小要素がちょうどよく収まるように、この flex-shrink で幅を自動制御しているということです。
0にすると縮小しなくなるので、独自の幅を設定できるようになります。