CSS flex-basis プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

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

CSS 構文

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 プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯