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

CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Carlos Enrique Castañeda Gutiérrez
Carlos Enrique Castañeda Gutiérrez
13,886 Points
Posted by Carlos Enrique Castañeda Gutiérrez
Carlos Enrique Castañeda Gutiérrez
13,886 Points

Question 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
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi 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!

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

I 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/

Robert Leonardi
Robert Leonardi
17,151 Points
Robert Leonardi
Robert Leonardi
17,151 Points

My 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
Boban Talevski
24,793 Points
Boban Talevski
Boban Talevski
24,793 Points

As 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.