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

Aaron Selonke
Aaron Selonke
10,323 Points

In the video the flex-basis property for all three .col divs is 50%....

In the video the flex-basis property for all three .col divs is 50%.... , so why does the third use 100% of the space when it moves under the two other columns??

4 Answers

Chris Freeman
MOD
Chris Freeman
Treehouse Moderator 55,457 Points

When the media width is in the midrange (769 - 1025px), the .col are defined at 50%. This forces the row to be overfilled. By also, setting the flex-wrap property, the row will overflow to the next line. In the next line, the third .col starts with an initial value of 50%, but will be fitted to the full width limited by the rest of the CSS properties. With no other constraints, the third .col is expanded to fill the width of the page.

Rick Rana
Rick Rana
6,667 Points

Hello Chris,

I'm a little confused. When .col is at 50%, doesn't it size them at half the width? How would that force the row to be overfilled? Seems the columns should fit in the container.

Chris Freeman
Chris Freeman
Treehouse Moderator 55,457 Points

With three items each with a flex-basis of 50% gives 150% of the width. In this case, the third item is wrapped to the next line.

James Barrett
James Barrett
13,252 Points

Hi Chris,

In my opinion, when the 3rd item wraps to the next line it takes up the full width of the container because the flow-grow property is set to '1' for all columns. Am I right in saying that?

Thanks, James.

Think of it using pixels instead of percentage and it may help you understand it a little more.

Say for example we had a container with no defined width which is set to wrap, and in that container we have three items that have a flex-basis of 50px pixels, when the container is shrunk down to less than 150px the third item will have then drop down and wrap beneath because we're saying that an item can't be less than 50px wide. If we then set the width of the container to 100px we'd have the same result, with two items of 50px and then the third wrapped beneath taking the full width of the container.

This means we can do the same thing with percentages rather than just using pixels, allowing the container to grow and shrink with the same behavior applied. The container is 100% and an item can't be less than 50%, so two will take up the first row and then the third item will take up full width beneath them.

Louise Rollins
Louise Rollins
5,739 Points

My understanding is that setting the flex-basis to 50% essentially means that the items have to take up at LEAST 50% of the container, from that point growing to fill the container as necessary. Can anyone confirm if this is correct?

Laman Mahammadli
Laman Mahammadli
2,527 Points

Yes, I think so. It is like min-width property. https://www.w3.org/TR/css-flexbox-1 Here it says that "flex-basis is resolved the same way as width in horizontal writing modes".

Zambis Bambis
PRO
Zambis Bambis
Pro Student 314 Points

I believe it's due to the fact that flex:grow is still set to 1. It makes the column take up all the free space given to it, since it is alone on the row.