Is flex-basis the same as setting width?


#1

Question

Is flex-basis the same as setting width?

Answer

It’s not! We can think of flex-basis as the width OR height (depending on flex-direction) of our flex items before they are constrained by a flex container.

Also, a few notes about using flex-basis and width/height:

  • flex-basis is limited by both max-width/max-height and min-width/min-height
  • When declared, flex-basis will override the width/height property set on a flex container
  • If no flex-basis is specified the default is the set width/height value, if width/height isn’t specified the default is the width/height of the content
  • When there is not enough space for our flex items our items will shrink at an even rate to fit within the container by default
  • If there is too much space we can declare flex-grow: 1; on our flex items to make them grow at an even rate