flexという一括指定プロパティの使い方について【CSSを書いていこう】

前回まででflex-grow､flex-shrinkを理解しました。

今回はフレックスグロウ、シュリンク、ベーシスはflex（フレックス）で一括指定ができます。

例えば、値を 1 1 100px; とするとグロウが１、シュリングが１、ベーシスが１００pxに設定されます。

また、値をautoにすると1 1 auto; と設定されるため、領域が余ったら広げる、足りなくなったら縮めるといった指定ができます。

また、値をnoneにすると0 0 auto; に設定されるので、伸ばしもしなければ縮めたりもしないといった指定になります。文字幅で固定。

一番よく使われるのはflex: 1;です。 flex: 1;と設定するとフレックスグロウが１に設定されますが注意点としてフレックスベーシスは0％に設定されます。

すべてのフレックスベーシスを0％にすることでフレックスグロウは割合通りきれいに分配されます。

これはフレックスベーシスを0%にすることによってその分の幅が余るという状態になるのでそれを再分配することで割合がわかりやすくなるというとでそのように設定されています。

少しややこしいですがflex: 1;を指定するとそのアイテムはブラウザ幅に合わせて伸び縮みすると覚えておくといいでしょう。

以上

この記事が気に入ったら
いいねまたはフォローしてね！

よかったらシェアしてね！

関連記事