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 数値 + 単位 |
サンプルコード
item 1
item 2
item 3
CSS
.flex-container {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
}
.flex-item {
-ms-flex-preferred-size:150px;
-webkit-flex:0 1 150px;
-moz-flex:0 1 150px;
flex:0 1 150px;
}item 1
item 2
item 3
CSS
.flex-container {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
}
.flex-item {
-ms-flex-preferred-size:150px;
-webkit-flex:0 1 150px;
-moz-flex:0 1 150px;
flex:0 1 150px;
}シミュレーション
- 1
- 2
- 3
- 4
- 5