CSS Flexible Box Layout Module


・・・
・・・
・・・

初期値

1

flexbox レイアウトは、ボックスの白を、複数の子要素にそのサイズに応じて均等に分配し、それらの子要素をコンテナーとなるブロックの中央に配置することができます。

2

flexbox レイアウトを有効にするには、最初に flexbox コンテナーを作成する必要があります。そうするには、要素の display プロパティを "-ms-flexbox" (ブロックレベルの flexbox コンテナーの場合) または "-ms-inline-flexbox" (インライン flexbox コンテナーの場合) に設定します。(CSS 可変ボックスレイアウトox" という ID の要素内でブロックレベルの flexbox コンテナーを作成しています。

3

Internet Explorer 10 では、すべてのボックスを最小のサイズにすることで、親ボックスの子要素ができるだけ少されるかはブロック方向によって決まり、記述方向やその他の特定の設定に応じて左から右または右から左のどちらかになります。

.flex {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}

子要素（各section）にflex関連プロパティが指定していないため、初期値であるボックスがあふれず、幅が各ボックスの内容によって自動調整される
また指定していない場合、高さも内容が一番多いボックスに合わせられる

ボックスレイアウトの方向、揃えを指定

1

2

3

/* 親要素（div） */
#fbox2 {
/* ショートハンド　レイアウトの方向を右から左、ボックスがあふれた場合は折り返し */
  -webkit-flex-flow: row-reverse wrap;
  flex-flow: row-reverse wrap;
/* 子要素を上揃え */
	 -webkit-align-items: flex-start;
  align-items: flex-start;
  background: #ccc
}
/* 子要素（section） */
#sec2-1, #sec2-2, #sec2-3 {
  width: 200px;
}

揃えを指定すると子要素の幅が均等で内容に差があれば高さは調整されない

子要素の幅と表示順を指定

1

2

3

#sec3-1 {
/* ショートハンド 子要素の拡大率、縮小率、基本サイズを指定 */
		-webkit-flex: 1 1 0px;
  flex: 1 1 0px;
/* 表示順 */
		-webkit-order: 2;
  order: 2;
}
#sec3-2 {
		-webkit-flex: 1 1 0px;
		-webkit-order: 3;
		flex: 1 1 0px;
		order: 3;
}
#sec3-3 {
		-webkit-flex: 1 1 0px;
		-webkit-order: 1;
		flex: 1 1 0px;
		order: 1;
}

拡大率と縮小率は内包するコンテンツサイズを1とする
子要素の幅の指定はwidthでも可能であるが、flexプロパティですべての子要素を同じ基本サイズ（幅）を指定すると均等幅で調整される。また計算における親和性も高い
表示順の指定はグループ単位、子要素が多数ある場合に指定した値が重複可能でその時の表示順は記述順と同じ

可変ボックス ("Flexbox") レイアウト

初期値

1

2

3

ボックスレイアウトの方向、揃えを指定

1

2

3

子要素の幅と表示順を指定

1

2

3