CSSリファレンス

flex-basisの意味と使い方

「flex-basis」はフレックスアイテムが調整される前の、基本の幅を指定するプロパティです。値の指定方法はwidthプロパティ(主軸の方向によってはheightプロパティ)と同じです。負の値は指定できません。
なお、「flex-baseis: 0;」を指定すると、アイテムのもつ幅が基本の幅となり、この幅にたいして余白の割り当てや縮小が行われます。

値の指定方法

実数値+単位

数値に単位を付けて幅を指定します。


パーセント値+%

フレックスコンテナの幅に対する割合で幅を指定します。


auto

フレックスアイテムに含まれるコンテンツの幅と同じになります。


関連プロパティ

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