Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Vladimir Klindić
19,262 PointsThe 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
28,149 PointsDo 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.
Guil Hernandez
Treehouse TeacherHey 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:
...you'll see that flex-shrink defaults to 1 and flex-basis to 0 -- or 0%. The same happens with .item-2:
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
28,149 PointsGuil 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
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
11,217 PointsThe problem is that the items break to a new line. At least they do in Chrome. That is not what shown in the video.
Abir Ahmed
Courses Plus Student 8,616 PointsAbir Ahmed
Courses Plus Student 8,616 Pointsthan 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 :)