Flexアイテムの基準幅

Flexアイテムの主軸方向の基準とする幅を指定する場合は、flex-basisプロパティを使用します。
主軸によって決められるので、width/heightプロパティのように縦横を気にしなくて済みます。
また、flex-wrapプロパティで折り返しを設定した場合、flex-basisで指定した幅によって折り返しの制御をすることも可能です。

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

flex-wrapプロパティで折り返しの指定がされている場合、Flexアイテムの横幅がflex-basisプロパティで指定した値より小さくなると、自動的に折り返すといった組み合わせが可能になります。

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

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

【構文】

							flex:flex-grow flex-shrink ;
							または
							flex-basis:;
						
プロパティ名 初期値 適用範囲 継承 設定可能値
flex-basis auto Flexアイテム しない auto
content
数値 + 単位

サンプル1

item 1

item 2

item 3

CSS

サンプル2(flex-wrapの指定あり)

item 1

item 2

item 3

CSS

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