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 Two Column Layout with Flexbox

Samuel Kleos
seal-mask
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 13,728 Points
Posted by Samuel Kleos
.a{fill-rule:evenodd;}techdegree
Samuel Kleos
Front End Web Development Techdegree Student 13,728 Points

The flex shorthand property assigns equal width to columns (.col) but flex-grow doesn't.

MY SNAPSHOT: https://w.trhou.se/dbntdiv1i0

.col is a shared class between the two columns .primary and .secondary.

I wrote the following rules inside the media query however the .col does not assign equal width:

@media (min-width:769px) {
    .main-header, .main-nav, .row {
        display: flex;
    }
    .main-header {
        flex-direction: column;
        align-items: center;
    }
    .col {
        flex-grow: 1;
    }
}

Is there something wrong with this workspace? I seem to be having a lot of weird issues.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

When you use the "flex" shorthand with just one argument, it does set that value as the flex-grow, but it also sets flex-basis to 0. So to get the same effect as you get using just "flex" you need to add flex-basis: 0; to your CSS rule. Otherwise, flex-basis remains at the default value of "auto".

For more details, see the MDN page on The flex CSS shorthand property.