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

Byron Glover
Byron Glover
5,772 Points
Posted by Byron Glover
Byron Glover
5,772 Points

Flex-box properties

So in my .col instead of using flex: 1, I used flex-grow: 1 And then in my .primary I used flew-grow: 2;

when I re-sized the browser to between 769px & 1025px the two columns (did not) take up equal amounts of width, however when I changed the .col back to flex: 1 the columns were equally sized as desired.

I was under the impression that flex: 1 would be the same as flex-grow: 1; ?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

They should be interchangeable. Do you have a demonstration set up in a workspace snapshot you could post?

Byron Glover
Byron Glover
5,772 Points
Byron Glover
Byron Glover
5,772 Points

Here is my code for the exercise, I simply change .col from flex: 1; to flex-grow: 1; and my columns are no longer centered when in between 769px and 1025px, it's like the statement is completely ignored....

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

@media (min-width: 1025px) {
    .main-header {
        flex-direction: row;
        justify-content: space-between;
  }

   .primary {
       flex-grow: 2;
    } 
}

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Byron,

The flex shorthand property doesn't work the same as other shorthand properties in css. Normally when you omit an individual property value from the shorthand it will be set back to its initial value.

In the case of the flex shorthand, both flex-grow and flex-basis are set to values different from their intial values if you omit them from the shorthand property.

If omitted, flex-grow is set to 1 instead of the initial value of 0 and flex-basis is set to 0% instead of the initial value of auto.

This was done to address common cases

In this case, Guil is taking advantage of the 4th case listed:

'flex: <positive-number>'
    Equivalent to flex: <positive-number> 1 0%. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

So when you do flex-grow: 1, flex-basis is still at it's initial value of auto. This means the items will be sized based on content and each item will receive a proportion of the remaining space based on the flex factor.

When you do flex: 1, then the flex grow factor is set to 1 but flex-basis is set to 0%. this means that the items will be sized to zero and then each given a proportion of the total space available based on the flex factor. This results in 2 equal width columns.

Steve Gallant
Steve Gallant
14,943 Points
Steve Gallant
Steve Gallant
14,943 Points

I've been reading lots of questions and confusion (including me) on this matter as I proceed through the course. This was the most clear answer yet, thank you!