プログラミング

flex-growでフレックスアイテムの幅の伸び率を指定【CSS】

flex-growプロパティは、フレックスコンテナの幅に余白がある場合、フレックスアイテムの伸び率を指定するプロパティです。

{flex-grow: 伸び率;}

伸び率というのはフレックスコンテナの幅やflex-wrapプロパティの折り返しの指定、flex-basisプロパティに影響されて、自動的に決まります。

flex-growの値の指定方法

flex-growプロパティでは、フレックスアイテムの伸び率を他のアイテムとの相対値(整数)で指定します。

伸び率を指定しない場合、右側に余白ができます。

  • box1
  • box2
  • box3
  • box4

伸び率を指定すると、次のような感じ。

  • box1
  • box2
  • box3
  • box4

それぞれのフレックスアイテムに伸び率を0〜3で指定しています。

Leave a Comment