CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 flex-basis属性の使用方法と例

flex-basis CSS属性で指定されたエラストシティ要素の初期ベース値

以下のテーブルには、この属性の使用方法とバージョン履歴、javascriptスクリプトでの使用構文が含まれています。

デフォルト値：	auto
適用：	フリックスアイテム
継承：	ありません
アニメーション可能：	は。参照してくださいアニメーション属性。
バージョン：	CSS3の新しい機能
JavaScriptの構文：	object.style.flexBasis="180px"

flex-basisの使用構文

この属性の構文は以下の通りです：

flex-basis:　width　|　auto　|　initial　|　inherit

以下の例では、flexを使用する方法を示しています。-basis属性。

例

.flex-container　{
　　　　display:　flex;　　　　　　
}　
.item1　{
　　　　background:　#ff80c0;
　　　　-webkit-flex-basis:　300px;　/*　Safari　6。1+　*/
　　　　flex-basis:　300px;
}
.item2　{
　　　　background:　#8080ff;
　　　　-webkit-flex-basis:　30%;　/*　Safari　6。1+　*/
　　　　flex-basis:　30%;
}
.item3　{
　　　　width:　120px;
　　　　background:#0080ff;
}

テストを試してみる‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
width	絶対または相対単位で表される長さで、フリックスアイテムの初期長さを指定します。負の値は無効です。
auto	フリックスアイテムの幅はそのwidthこの属性の値。widthがフリックスアイテムに指定されていない場合、幅はその内容に依存します。これはデフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のflexを-basisの属性値。

ブラウザ互換性

flex-basis属性のブラウザの互換性について、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザがこの属性をサポートしています。

	Firefox 18+ ^-moz-、28 Google Chrome 21+ ^-webkit-、29 Internet Explorer 10+ ^-ms-、11 Apple Safari 6。1+ ^-webkit- Opera 12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3多列レイアウト。

CSS3 flex-direction 属性 CSS3 flex 属性