Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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 4,288 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
218,692 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.