Flexアイテムの伸長率

主軸方向の残っているFlexコンテナーの幅から分割して、Flexアイテムへ割り振るには、flex-growプロパティ(旧仕様ではbox-flexプロパティ)を使用します。

1つ目の例として、Flexアイテムすべてに対してflex-growを1に設定した場合、余っている幅をflex-growの値を合計した分等幅で分割し、Flexアイテムにそれぞれ分割した幅が追加されます。

また2つ目の例として、1つ目のFlexアイテムに対してflex-growを1、2つ目のFlexアイテムに対してflex-growを2に設定した場合は、余っている幅をflex-growの値を合計した分等幅で分割し、1つ目のFlexアイテムには分割した1つ分の幅、2つ目のFlexアイテムには分割した2つ分の幅が追加されます。

Internet Explorer 10では、ショートハンドである-ms-flexプロパティか、-ms-flex-positiveプロパティを使用します。

なお、flex-growプロパティはショートハンドであるflexプロパティの1番目の指定にあたります。

  • ※ 未指定の値を正しく設定するため、flexプロパティを使用することを推奨しています。

構文

flex:割合 flex-shrink flex-basis;

または

flex-grow:割合;
プロパティ名 初期値 適用範囲 継承 設定可能値
flex-grow 0 Flexアイテム しない 数値

サンプルコード

次のサンプルでは、1:2:3の割合で指定した例です。

item 1

item 2

item 3

CSS

div.flexbox-container {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
}

	div.flexbox-item:nth-child(1) {
		-webkit-box-flex:1;
		-moz-box-flex:1;
		-ms-flex-positive:1;
		-webkit-flex:1 1 auto;
		-moz-flex:1 1 auto;
		flex:1 1 auto;
	}

	div.flexbox-item:nth-child(2) {
		-webkit-box-flex:2;
		-moz-box-flex:2;
		-ms-flex-positive:2;
		-webkit-flex:2 1 auto;
		-moz-flex:2 1 auto;
		flex:2 1 auto;
	}

	div.flexbox-item:nth-child(3) {
		-webkit-box-flex:3;
		-moz-box-flex:3;
		-ms-flex-positive:3;
		-webkit-flex:3 1 auto;
		-moz-flex:3 1 auto;
		flex:3 1 auto;
	}

次のサンプルでは、1つ目のFlexアイテムのみを指定した例です。

item 1

item 2

item 3

CSS

div.flexbox-container {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
}

	div.flexbox-item:first-child {
		-webkit-box-flex:1;
		-moz-box-flex:1;
		-ms-flex-positive:1;
		-webkit-flex:1 1 auto;
		-moz-flex:1 1 auto;
		flex:1 1 auto;
	}

シミュレーション

  • 1
  • 2
  • 3
  • 4
  • 5

CSS3逆引きリファレンス一覧へ戻る