Flexプロパティとは？

flexプロパティとは、flexbox子要素に対して伸び縮みの比率を指定できるプロパティです。具体的には、「flex-grow」「flex-shrink」「flex-basis」という3つの値を、ショートハンドのようにまとめて指定することができる便利なCSSです。

Flexプロパティの構成要素

Flexプロパティは、flexboxを用いる際に非常に便利で、以下の3つのプロパティをコンパクトに表現できます。

以下に、flexプロパティを用いてどのように要素の伸び縮みを制御できるかを示す例を記します。


.container {
    display: flex;
}

.item {
    flex: 1 1 100px;
}

この例では、.itemは「1 1 100px」という値を指定しています。つまり、要素は成長も縮退も可能で、デフォルトのサイズは100pxであることを意味します。

Flexプロパティは非常に強力ですが、使い方を誤ると意図しないレイアウトになる可能性があります。特に、flex-growとflex-shrinkの設定値は、コンテナのサイズと内容物のサイズによって異なる結果を生むことに留意してください。

質問	回答
Q1: flexプロパティはどのようにショートハンドで指定しますか？	A1: flexプロパティは、「flex-grow flex-shrink flex-basis」の順で指定します。例えば、`flex: 1 1 100px;`です。
Q2: flex-growを0に設定する意味は何ですか？	A2: flex-growを0に設定すると、要素は追加のスペースを占有しようとはせず、他の要素によって押し出されない限りはデフォルトサイズを保持します。
Q3: flex-basisをautoに設定した場合はどうなりますか？	A3: flex-basisをautoに設定すると、要素のコンテンツサイズまたは幅/高さが優先され、可能であればそのサイズに基づいてレイアウトされます。

その他の参考記事:flex-basis