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 属性

例

第二个エラストイックアイテムの初期長さを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