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 trialCarlos Enrique Castañeda Gutiérrez
13,886 PointsQuestion about Flex-basis: 0 used on the video
Hello:
In certain part of the video Guil use this code to create 3 columns: .col { flex-basis: 0; }
It works nice because on the html there are exactly 3 divs but If I add a new div "fourth", the layout shows 4 columns and looks bad.
How can I keep 3 columns layout even when I have n-divs (.col) on the html?
I tried this code:
.col { flex: 1 33.33% }
.primary { flex-grow: 1.4; }
the code above keep 3 columns layout but all of them have the same width, the primary flex-grow didn't work. Why flex-grow:1.4; don't honor it's value even when .primary have more specificity than .col?
Thanks
2 Answers
Daniel Gonzalez
22,105 PointsHi Carlos,
I believe the reason why your code won't honor flex-grow: 1.4 on class .primary is because on the class .col you have a "flex-basis" property of 33.33%. The flex-basis property is the initial size of the flex item before any available space is distributed. In other words if you have 3 columns then they will each take up an initial width of 33.33% of the available space of the screen. If you have flex-grow on your primary column that will not "grow" the primary column as there is no available space for it to "grow". It might help to set the flex-basis property to 0 so that the initial width of all columns is not predefined. Then the flex-grow property should increase the width of the primary column to 1.4.
Let me know if this helps!
Robert Leonardi
17,151 PointsMy different approach is NOT to use the flex-basis,
Instead I used flex:1;
in the media query min-width: 1025px... i just removed the 50%
and it worked
Boban Talevski
24,793 PointsAs far as I understand, by using flex:1, you just made all columns equal width (setting their flex-basis to 0%), which is not the desired effect. The flex:1 will make them each take an equal amount of the remaining space in the row. But we wanted the middle (primary) column to be a bit wider which is why Guil does what he does in the video.
Daniel Gonzalez
22,105 PointsDaniel Gonzalez
22,105 PointsI have also included the links below that might help better explain flex-basis and flex-grow. Flex-basis-https://css-tricks.com/almanac/properties/f/flex-basis/ Flex-grow- https://css-tricks.com/almanac/properties/f/flex-grow/