flexでフレックスアイテムの幅・伸び率・縮み率を指定【CSS】

flexプロパティは、フレックスアイテムの幅・伸び率・縮み率をまとめて指定するショートハンドプロパティです。

{flex: 伸び率縮み率幅;}

flexの値の指定方法

flexプロパティで指定できる値は、フレックスアイテムの幅に関する各プロパティ「flex-grow」、「flex-shrink」、「flex-basis」と同じで、それぞれの値は半角スペースで区切って指定します。

{flex: 0 1 100px;}

flex-basisプロパティの値は最後に指定します。上の例ではフレックスコンテナの幅200pxに対して、フレックスアイテムの幅は100pxになっていますが、縮み率も指定しているので、コンテナ幅に収まっています。

ちなみに値を省略した場合は、各プロパティの初期値が適用されます。

また、3つのプロパティの値を指定する代わりに以下のキーワードを指定することもできます。

initialを指定すると、「0 1 auto」と同じ意味で、フレックスアイテムの幅は、内容に合わせて決まります。

フレックスコンテナの幅に余白があってもフレックスアイテムの幅は伸びませんが、コンテナ幅が小さいときは縮みます。

autoを指定すると、「1 1 auto」と同じ意味。

フレックスアイテムの幅は、指定しない限り内容に合わせて決まりますし、フレックスコンテナの幅に余白があるときはフレックスアイテムの幅が伸び、コンテナ幅が小さいときは縮みます。

noneを指定すると、「0 0 auto」と同じ意味になります。

フレックスアイテムの幅は、指定しない限り内容に合わせて決まりますが、フレックスアイテムの幅は伸縮しません。