Is flex-basis the same as setting width?

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
6 Likes

Whats the point in using flex-basis? Seems like we can just use width and height.

19 Likes

Some good additional resources describing the basics of flex box

68 Likes

This flexbox zombies game is amazing for remembering flexbox!

14 Likes

As soon as you add a flex-grow property the basis becomes obsolete? At least in the excersise it doesnt do anything anymore.

2 Likes

The game link is not working :frowning:

1 Like

Delayed answer but I think of flex-basis as “flex-when” or “flex-wait”, i.e. the values set for flex-grow and flex-shrink will WAIT to apply only WHEN the value for flex-basis is met.

e.g. .center-div {width: 200px; flex-basis: 100px; flex-shrink: 3}.

All flex-items will shrink proportionately until the width of .center-div reaches 100px, at which point it shrinks at 3 x the rate of the other flex-items. Can anyone confirm / refute this interpretation?

12 Likes

Eyeballing it I would concur that this is what happens too.

1 Like

I agree, so it seems that once it hits the point of 100px, it will exponentially shrink at a rate of what you set for flex-shrink, which in this case, is 3.

1 Like

Not exponentially, but buy the factor of the value you set. I get what you meant, though. Likewise with flex-grow.

@cakaragiannis I doubt that. It really seems to behave exactly like the width property. I looked it up on the MDN documentations and on the resources posted by @tesla809. What I get is that we could define a width for a whole class of elements but then if we wanted a particular one to be different we could use the flex-basis property to give it a unique size since it overrides the width property. thoughts?

@ruronite

I see what you mean, but there are important differences:

  1. Flex-basis only applies to flex-items, width does not.
  2. Flex-basis takes priority over Width, which takes priority over the content’s computed width,
  3. The Flex-basis value represents the ideal or hypothetical size of flex items before they are placed into a flex container that is too large or too small, at which point the elements will flex according to the available space, and the default or set values set for flex-shrink, flex-grow and flex-wrap, for example.

Here is a fairly good explanation: The difference between width and flex-basis

5 Likes

Here you go… https://geddski.teachable.com/p/flexbox-zombies

7 Likes

This is great, thank you.

When I glanced through the question and answers that brought me to this page just to confirm what I practiced on, I must confess that my faith in @codecademy was strengthened as I read @cakaragiannis detailed responses to the - flex-basis and set width.
He did NOT only answer question posed BUT dealt precisely on the movement as per flex-grow/shrink behaviors relative to the given exercises.
Thanks my friend. I appreciate you.

3 Likes

Here is another good article to that question:

I guess the important difference is, that flex-basis overrides the width AND height property. That’s important when changing from “flex-direction: row” to “flex-direction: column”.

A good explanation of flex-direction can be found here: https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/

Please correct me, if I’m wrong :slight_smile:

1 Like

Flexbox Froggy is a great game that helped me understand flexbox: https://flexboxfroggy.com/

6 Likes

You definitely can, but you’ll have to set that explicitly any time you want to change flex-direction. it’s nice to save a few lines in the case where there are two flex boxes running in different directions, and there’s a certain break point where you want them to match up. In that case you’d just have to change the flex-direction instead of trying to work with the width/height of the items.

Of course the width/height work still may need to be done on the parent to a certain extent, but it doesn’t have to affect your flex container or items, which is nice for a component based UI. Maybe check this out below to see if it gives you some ideas.

Brilliant. Codecademy should take note.

Thanks for sharing. Really cool.