Zenn
🕌

flexプロパティについて

に公開
CSS
tech

flexプロパティ

flexプロパティについて深く知っていないなと思ったので調べて見ることにしました。
まずflexプロパティとはflexbox子要素に対して、「伸び縮みの比率を指定」できるプロパティです。

具体的には以下の3つのプロパティをまとめて指定するこおとができます。

  • flex-grow
  • flex-shrink
  • flex-basis

これらは比率や幅を制御するプロパティで、それぞれ以下のような意味合いを持っています。

  • flex-grow　伸長(初期値:0)
  • flex-shrink 圧縮(初期値:1)
  • flex-basis 幅(初期値:auto)

flex-grow

flex-growプロパティはflexコンテナ内に余白がある時に、余白部分をflexアイテムに指定した比率分だけ追加します。

画像のような4つの横並びの1番目にflex-grow: 1;を指定したとします。


すると、このように1番目の要素の横幅が伸びます。

また、2番目にもflex-grow: 1;を指定したとします。

すると、このように2番目の要素の横幅が伸び、その分1番目の幅が縮みます。
これは1と2で1:1、余白の50％分追加しているためです。
1にflex-grow: 3;を入れていた場合は、3:1で1番目に75%、2番目に25%分追加となります。
このように余白部分を指定したプロパティに追加できます。便利ですね。

flex-shrink

flex-growは、flexコンテナ内に余白がある時に、余白部分をflexアイテムに指定した比率の分だけ追加します。
flexboxは子要素が親要素からはみ出す場合、子要素を縮めて収めようとします。その時の子要素が負担する縮みの比率を決めるのがこのプロパティです。
子要素二つにwidth: 100%;を指定したflexboxがあるとします。

1つ目にflex-shrink: 2;、2つ目にflex-shrink: 3;を指定すると画像のようになります。
「1つ目の負担する縮み」 : 「2つ目の負担する縮み」　＝　２：３となるためこうなります。

flex-basis

flex-basisは、flexアイテムの基本の幅を指定できるプロパティです。
flex-basis には、以下のような性質があります。

  • width と併用したとき、flex-basis の値が優先される
  • flexアイテムが並ぶ方向によって横幅か高さの値となる
  • flex-grow / flex-shrink を使用するときの基準の値となる

指定方法に関しては以下の通りです。

  • auto: フレックスアイテムの内容に合わせて自動的に幅が指定されます。
  • 任意の数値＋単位: フレックスアイテムの幅を単位付きの数値で指定します。
  • %値: %値を指定します。値はフレックスコンテナの主軸の幅に対する割合となります。

Discussion