フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。flex-grow（余白の配分比率）、flex-shrink（縮小比率）、flex-basis（基本サイズ）を組み合わせて、柔軟で予測可能なレイアウトを実現します。
flex: <flex-grow> <flex-shrink> <flex-basis>| flex-1 | flex: 1 1 0% |
| flex-auto | flex: 1 1 auto |
| flex-none | flex: none |
| grow | flex-grow: 1 |
| shrink-0 | flex-shrink: 0 |
| basis-1/2 | flex-basis: 50% |
「画像が潰れる」対策の flex-shrink: 0 は shrink-0。
.sidebar {
flex: 0 0 250px;
}
.main {
flex: 1;
}固定サイドバーと可変メインコンテンツ
.card {
flex: 1 1 300px;
}最小300pxで均等に伸縮するカード
flex: none;伸縮しない（flex: 0 0 auto と同じ）
flex: 1は最も使用頻度が高い。レスポンシブデザインの基本。
flex: 1はflex: 1 1 0%の省略で、basisが0になるため「コンテンツ量に関係なく均等分配」になります。一方flex-grow: 1だけ指定するとbasisはautoのままで「コンテンツ量に応じた分配」です。この違いはAIの説明でも頻繁に曖昧にされます。また「flexアイテムがつぶれる/はみ出す」問題の多くはflex-shrinkとmin-width: autoの相互作用で、flex-shrink: 0またはmin-width: 0が処方箋です。
flex: 1とflex-grow: 1の違いを、このレイアウトでの実際の挙動の差で説明して
flexで固定幅サイドバー+可変メインの定番レイアウトを、つぶれ防止（shrink: 0）込みで書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。