フレックスアイテムの幅をまとめて指定する

flex

{ flex 【 フレックス 】 : -grow -shrink -basis; }

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

初期値 各プロパティに準じる
継承 各プロパティに準じる
適用される要素 フレックスコンテナ
モジュール CSS Flexible Box Layout Module Level 1

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。任意の順序で指定できますが、flex-basisプロパティの値は最後に指定します。省略した場合は各プロパティの初期値が適用されます。また、3つのプロパティの値を指定する代わりに以下のキーワードを指定することも可能です。

initial 「0 1 auto」と同じです。フレックスアイテムの幅は、指定しない限り内容に合わせて決まります。また、主軸の幅に余白があってもフレックスアイテムの幅は伸びません。主軸の幅が小さいときは縮みます。
auto 「1 1 auto」と同じです。フレックスアイテムの幅は、指定しない限り内容に合わせて決まります。また、主軸の幅に余白があるとき、フレックスアイテムの幅が伸びます。主軸の幅が小さいときは縮みます。
none 「0 0 auto」と同じです。フレックスアイテムの幅は、指定しない限り内容に合わせて決まります。また、フレックスアイテムの幅は伸縮しません。

サンプルコード

以下の例では、フレックスアイテムの幅はフレックスコンテナの主軸の幅に合わせて自動的に伸縮します。

.container {
  display: flex;
  flex: auto;
}

ポイント

  • 2015年1月時点では、flex-grow、flex-shrink、flex-basisの各プロパティを使わずに、flexプロパティを使うことが推奨されています。値を指定していないプロパティをなるべく残さないためです。

関連記事