Aaron Selonke10,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??
Chris FreemanTreehouse Moderator 53,535 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.
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 Rollins5,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?
Zambis BambisPro 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.