CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Vladimir Klindić
Vladimir Klindić
18,228 Points

The flex shorthand sets the flex-basis value to zero?

Guil said if omitted in flex shorthand flex-basis takes value of 0, so the flex items don't redistribute the space inside the flex container by breaking to a new line. In my case results are the same. When I'm resizing the browser this code .item { flex-grow: 1; flex-basis: 100px; } acts as this .item { flex: 1; }. Why is that happening?

2 Answers

Kevin Korte
Kevin Korte
28,084 Points

Do you have a workspace or codepen that we can use to try to replicate what you're seeing? And I think Guil misspoke, or the flexbox standards have changed since this video was released, which is VERY possible, but to be extra clear, flex-basis defaults to auto, not 0 when it's not set. Effectively I believe it still behaves the exact same, so again, it's not that at least currently that the video is wrong, it's just not as right as it can be, today, with current flexbox specs.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Abir Ahmed
Abir Ahmed
Pro Student 8,616 Points

than treehouse should remove this types of misleading video, in my case when I write down this code on the workspace:

.item { flex: 1; }

.item-2 { flex: 2; }

and it did the same as like if I give this any flex-basis property, I was so confused that why it's not matching with Guil but thanks to you Kevin Korte :)

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hey Abir Ahmed,

The video wasn't meant to be misleading. When you include only one value for flex, flex-shrink defaults to 1 and flex-basis to 0.

For example, .item is set to flex: 1. If you take a look at the computed CSS values:

example

...you'll see that flex-shrink defaults to 1 and flex-basis to 0 -- or 0%. The same happens with .item-2:

example

When set to flex: 2, flex-shrink still defaults to 1 and flex-basis to 0%

Check out another good flex reference on CSS Tricks.

Hope this helps. :)

Kevin Korte
Kevin Korte
28,084 Points

Guil Hernandez you're right, I was able to replicate the same thing. So what's going on here, cause I want to make sure I'm correct going forward anyway.

It says here, flex-basis initial value is auto https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Chris says the same thing here. The flex shorthand defaults (flex-grow flex-shrink flex-basis) 0 1 auto. He also says flex-basis defaults to auto in the same article https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Two sources I trust greatly, however inspecting the browser, I too show that flex-basis is 0% when omitted. The problem is that 0 and auto are not the same.

This is from the W3 flex-basis

https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg

I feel like my whole world is a lie...haha. Is there some old flexbox defaults I'm getting in here, or why are two generally reliable resources both seem to be wrong, or am I reading something wrong.

Kent Hefley
Kent Hefley
11,158 Points

The problem is that the items break to a new line. At least they do in Chrome. That is not what shown in the video.