flexboxのレスポンシブ対応で可変にしたくないアイテムのCSS指定

CSS

2022.07.18

この記事は約1分で読めます。

display: flex;で指定した子要素にあたるものの幅を可変にしたくない時ってありますよね。
例えば画像とテキストが横に並んだメディアと呼ばれるようなものです。

画像とテキスト部分をそれぞれFlexアイテムとして、flexboxの子要素となっている時、
何もしないまま(初期値のまま)だと各幅は可変です。

これは各子要素の初期値で

flex-shrink: 1;

1	flex-shrink: 1;

となっているからです。

そのため、例えば画像を置いているところを固定のままにしたい、というようなときはわざわざ明示しないといけないらしいです。

flex-shrink: 0;

1	flex-shrink: 0;

widthやflex-basisをいじってもうまくいかない人は一度試してみてください。

下の参考サイトで学ばせていただきました。

【参考サイト】