2番目のフレックスアイテムの初期の長さを 80 ピクセルに設定します:
div:nth-of-type(2) {
-webkit-flex-basis: 80px; /*
Safari 6.1+ */
flex-basis: 80px;
}
Try it Yourself ❯
flex-basis プロパティは、フレックスアイテムの初期の長さを指定します。
注: 要素がフレックスアイテムでない場合、flex-basis プロパティの効果はありません。
| デフォルト値: | auto |
|---|---|
| 継承: | 継承する |
| アニメーション可否: | 可。animatable を参照 Try it |
| バージョン: | CSS3 |
| JavaScript 構文: | object.style.flexBasis="200px" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-webkit-、-moz- の後に続く数字 は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| flex-basis | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
flex-basis: number|auto|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| number | フレックスアイテムの初期の長さを、長さの単位またはパーセントで指定します | Play it ❯ |
| auto | デフォルト値。長さはフレックスアイテムの長さと同じです。アイテムの長さが指定されていない場合、 そのコンテンツに応じた長さになります | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス:flex プロパティ
CSSリファレンス:flex-direction プロパティ
CSSリファレンス:flex-flow プロパティ
CSSリファレンス:flex-grow プロパティ
CSSリファレンス:flex-shrink プロパティ
CSSリファレンス:flex-wrap プロパティ
HTML DOM リファレンス:flexBasis プロパティ