CSSリファレンス

flexの意味と使い方

フレックスアイテムの大きさを可変にすると同時に、その際の増減の割合やサイズを一括して指定するプロパティです。それぞれの値を半角スペースで区切って記述します。flex-basisの値は、flex-growプロパティとflex-shrinkプロパティの前または後ろに指定します。
ただし、flex-growプロパティ、flex-basisプロパティの初期値と、flexプロパティでこれらのプロパティの値が省略された場合とでは、設定される値が異なる点に注意してください。

値の指定方法

flex-growの値

割り当てる余白の割合を指定します。この値を省略した場合は「1」とみなされます。負の値は指定できません。


flex-shrinkの値

縮小する割合を指定します。この値を省略して場合は、「1」とみなされます。負の値は指定できません。


flex-basisの値

基本の幅を指定します。この値を省略した場合は「0」とみなされます。負の値は指定できません。


none

「0 0 auto」を指定した場合と同じです。


関連プロパティ

  • flex-grow:フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率を指定する
  • flex-shrink:フレックスコンテナの主軸の幅よりも大きい場合の、フレックスアイテムの縮み率を指定する
  • flex-basis:フレックスアイテムの基本の幅を指定する