主軸に沿ったフレックス要素のサイズ

プロパティwidthとheightは、軸の方向に関係なくフレックス要素の幅と高さを指定します。つまり、軸が水平の場合、 widthは幅を指定しますが、軸が垂直の場合でも、widthは依然として幅を指定します。この動作は不便な場合があります。

フレックスモデルには、要素の主軸に沿ったサイズを指定する特別なプロパティflex-basisがあります。これは、主軸が水平の場合は要素の幅を指定し、垂直の場合は高さを指定することを意味します。このプロパティは、親要素ではなく、フレックス要素自体に設定する必要があります。例を見てみましょう。

現在、主軸が水平で、 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;
}

5つのフレックスブロックを作成してください。主軸に沿った幅を100pxに設定してください。異なる軸に沿ったブロックの動作を確認してください。

軸が水平で、ブロックにflex-basisプロパティと同時にwidthプロパティが設定されている場合、 flex-basisが優先されます。これを確認してください。

軸が垂直で、ブロックにflex-basisプロパティと同時にheightプロパティが設定されている場合、 flex-basisが優先されます。これを確認してください。