flex-basis プロパティ

プロパティ flex-basis は、他のフレックスプロパティが適用される前の、特定のフレックスアイテムのサイズを設定します。一般に、このプロパティはメイン軸に沿った要素のサイズを指定します。つまり、メイン軸が水平の場合は要素の幅を、垂直の場合は高さを設定することになります。

特定のフレックスアイテムに適用されます。

このプロパティは、一括指定プロパティである flex の構成要素です。

構文

セレクター {
	flex-basis: CSSの任意の単位（パーセンテージを含む） | auto;
}

初期値: auto。

例

メイン軸が水平方向であり、flex-basis の値が 50px とします。この場合、要素の幅は 50px になります：

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* 軸は水平 */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* 要素のサイズ */
	border: 1px solid green;
}

例

プロパティ flex-basis の値を変えずに、軸を反転させてみましょう。この場合、要素の高さが 50px になります：

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* 軸は垂直 */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

flex-basis プロパティ

構文

例

例

関連項目