基本的なflexの使い方について

Question

flex-basisとflex-growの使い分けかたを教えてください。
両者とも箱の横幅を指定する点では同じだと思ったのですが、よろしくお願いします。

Comments

[m.ts10806]

実際に色々試してみればわかることもあるのではないでしょうか。
あとご自身が違いについて調べたこと(その参考記事)も具体的に記載してください

Answer 1

ここを参考にされると良いかと

以下引用。

###flex-grow

ある flex アイテムが、 flex コンテナ内の他の flex アイテムと比較して、どのくらい大きくなろうとするかを整数値で指定する。

と

###flex-basis

flex-basis についてはまだ仕様が不安定な印象です。
とりあえず MDN の説明を引用。

flex-basis CSS プロパティは、flex アイテムの初期 main size である flex basis を指定します。box-sizing を使用して別に指定されていない限り、このプロパティが content-box の寸法を定義します。

MDN: flex-basis

要はベースとなる width か height を指定するということだと思う。

box-sizing の影響を受けるので、 border 、 padding を含めた値を指定したい場合は box-sizing を border-box にする。

Comments

[sheepshonn]

ご丁寧にありがとうございました