flex-basisについて解説

flex-basisは子要素に対し width や height と同じように幅や高さの値を指定するプロパティです。

flexアイテムの並び方によって幅や高さ、どちらの値をとるか切り替わる性質を持ちます。

それでは flex-basis の指定方法を見ていきましょう。

/* 初期値 */
.item-01 {
　flex-basis: auto;
}

/* 「数値 + 単位」の指定 */
.item-02 {
　flex-basis: 200px;
}

/* 「％」の指定 */
.item-03 {
　flex-basis: 30%;
}

上記のようにflex-basisでは、autoや「数値 + 単位」、「％」の3つの方法で横幅を指定することができます。

また、1つだけ覚えておきたいのが flex-basis は width や height よりも優先されて適用されるので覚えておくとよいかもしれません。

この記事では flex-basis について解説しました。

flex-basisは子要素に対し width や height と同じように幅や高さの値を指定するプロパティです。

flexアイテムの並び方によって幅や高さ、どちらの値をとるか切り替わる性質を持ちます。

また、flex-basis は width や height よりも優先されて適用されます。

最後までお読みいただきありがとうございます。