Welcome to the new Web Developer's Journal built with Nuxt Content!

Css width vs. flex-basis: what’s the Difference?

There is a time in every frontend developer's life when they learn flexbox and ask: what is the difference between width and flex-basis? They look the same at first glance.

The answer is that in some cases they are them same. There are a couple edge cases you have to be aware of.

  • flex-basis by default is equal to width if set, or the width of the content.
  • If there is a width set, flex-basis can overwrite that.
  • width works horizontally, flex-basis works on the main axis. This is the most notable difference.
  • If you also set a min-width, that can overwrite your flex-basis setting.

It's really that simple folks.