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!

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

Why the flex-basis: 50% isn't working?

I have a question regarding this part:

@media (min-width: 769px) {
.row {
   display: flex;
.main-header {
   flex-direction: column;
   align-items: center;
.col {
   flex: 1 50%;
.row {
   flex-wrap: wrap;
.secondary {
   order: -1;

I wonder why all the columns have the same width when 769px < viewport <1025px after I removed this rule or make the flex-wrap: nowrap;

.row {
    flex-wrap: wrap;

I mean the flex-basis is set at 50%, so what makes columns' width equal? I don't understand how browser calculates the columns' width in this case.

Thank you so much~

Flex-basis gives the flexbox an initial size. When flex-basis isn't set, the box gives space based on the content it contains. If you have 3 sections and you say display flex to the container holding the sections, they change from their normal vertical position to an horizontal position with 3 columns, taking space based on the content inside of them.

Flex basis helps to give a particular section a size. In the code, we said when the viewport is 769px and above we want all the boxes to be equal size. That's why we did flex-grow: 1.

We now set our container to wrap. Meaning that the items can wrap when there's no space to hold all 3 sections. If we didn't set the flex-wrap to wrap, all 3 sections would be in one place and take up as much space as they want and our website will not be responsive.

Next, we set our flex-basis to 50%. This means that we only need two sections on top when the screen is 769px and above. Remember that your width is 100% total. Flex-basis of 50% gives two sections that amount. Then it wraps the third section and gives it 50% as well.

Our 1025px screen is big enough to hold our 3 sections. So what do we do? we set our flex basis to zero so our 3 sections can take equal spaces when the screen is big enough.

in conclusion. When the screen is 769px and above, give the items a flex-grow of 1 (equal share of the space). Give them an initial size of 50% with flex-basis (They would take 50% of the screen), flex wrap them so the 3rd section wraps down. When it's 1025px and above, flex-grow 1 (Give them equal space), but let the flex basis be zero. Let the 3 sections calculate and share equal spaces in one line.

1 Answer

You are almost there!! try @media screen and (min-width: 769px)