Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法

Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf

[shrkw]

わかりやすい

[winterfall]

“flexに1つだけ数値を指定すると、以下のようにflex-shrinkは1に、flex-basisは0になるそうです。”

[idr_zz]

意外に横幅が思い通りにならなかったりしています。 ここら辺の記事にヒントがありそうな… Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法 @rriverさんから

[TTTT2]

“<”

[mkto118]

あとで読む

[kojika17]

Flexboxを使う人に是非読んでほしい