ブログ投稿日時:
ブログ更新日時:
![flex-basisについて解説](https://soya-blog.com/wp-content/uploads/2024/02/flex-basisについて解説.png)
flex-basisについて解説
1.
flex-basis とは
flex-basisは子要素に対し width や height と同じように幅や高さの値を指定するプロパティです。
flexアイテムの並び方によって幅や高さ、どちらの値をとるか切り替わる性質を持ちます。
2.
flex-basis の指定方法
それでは 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 よりも優先されて適用されるので覚えておくとよいかもしれません。
3.
今回のまとめ
この記事では flex-basis について解説しました。
flex-basisは子要素に対し width や height と同じように幅や高さの値を指定するプロパティです。
flexアイテムの並び方によって幅や高さ、どちらの値をとるか切り替わる性質を持ちます。
また、flex-basis は width や height よりも優先されて適用されます。
最後までお読みいただきありがとうございます。