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.

The following two tabs change content below.

Jay Galaczi

Latest posts by Jay Galaczi (see all)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *