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

Question about Flex-basis: 0 used on the video


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?


2 Answers

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!

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

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,757 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.