SoyaBlog

これを見れば解決しそうや

HOME>CSS>flex-basisについて解説
ブログ投稿日時:
ブログ更新日時:
flex-basisについて解説

flex-basisについて解説

  1. flex-basis とは
  2. flex-basis の指定方法
  3. 今回のまとめ
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 や heigth よりも優先されて適用されるので覚えておくとよいかもしれません。

3.

今回のまとめ

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

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

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

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

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