CSS flex-basis 属性

定義と使用法

flex-basis 属性は、エラストアイテムの初期長さを指定します。

注釈：要素がエラストアイテムでない場合、flex 属性は無効です。

参照もしてください：

CSS チュートリアル： CSS フレックスボックス

CSS リファレンスマニュアル：flex 属性

CSS リファレンスマニュアル：flex-direction 属性

CSS リファレンスマニュアル：flex-flow 属性

CSS リファレンスマニュアル：flex-grow 属性

CSS リファレンスマニュアル：flex-shrink 属性

CSS リファレンスマニュアル：flex-wrap 属性

HTML DOM リファレンスマニュアル：flexBasis 属性

インスタンス

第2つのエラストアイテムの初期長さを100ピクセルに設定します：

div:nth-of-type(2) {
  flex-basis: 100px;
}

自分で試してみてください

CSS 文法

flex-basis: number|auto|initial|inherit;

属性値

値 説明
number 長さの単位またはパーセント、エラストアイテムの初期長さを指定します。
auto デフォルト値。長さは、エラストアイテムの長さに等しくなります。このアイテムに長さが指定されていない場合、長さはその内容に基づいて決定されます。
initial この属性をデフォルト値に設定します。参照してください。 initial。
inherit この属性は、親要素からこの属性を継承します。参照してください。 inherit。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション制作： サポートされています。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.flexBasis="200px"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

前頭に -webkit- または -moz- がある数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0