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 Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

Posted by Rory Matthews
Rory Matthews
2,287 Points

What is the difference between 'flex:' and 'flex-grow:'?

Hi! As in the title, really.

Also, I'm finding it difficult to understand the logic behind how flex items are being sized relative to one another with these properties.

I'm quite slow on the uptake with some of this! Any help much appreciated.

2 Answers

Rose Hurst
Rose Hurst
5,658 Points
Rose Hurst
Rose Hurst
5,658 Points

I'm sure I'm not going to be the best at explaining this. Flex-grow is a sub-property of Flex. If you have a space with an allocated width with say 4 flex-items nested inside, if you assign flex-grow: 1; to all of them they would all share an equal amount of space. If you perhaps wanted one of those flex-items to take up a larger width of the space you would then use flex-box: 2; (one the one). The remaining flex-items would then take up equal amounts of the remaining space.

Pretty sure someone will be along that can explain this better than I did.

Rory Matthews
Rory Matthews
2,287 Points

Thanks Rose! I'm sorry but I still don't understand the relative sizing of items. If I have something like the following:

<div class="flexbox">
    <div class="column1 column">
    <div/>
    <div class="column2 column">
    <div/>
    <div class="column3 column">
    <div/>
</div>

.flexbox {
    display: -webkit-flex;
}

.column {
    -webkit-flex: 1;
}

.column2 {
    -webkit-flex: 2;
}

Why isn't column2 twice the width of the other columns? Guil says in the video it's all about ratios, so if the standard width of a column is defined here as '1', why is a column whose width is specified as '2' not twice the size of the other columns? Sorry to be slow

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

It looks like you are missing a element for flex-grow that should apply flex equally to each of the items in the parent. It should look something like .flexbox li { -webkit-flex-grow: 1; } It looks like that is what you are trying to do in .column.

Your flex should then apply to the individual item you have already entered.

Also are you working in a browser that needs the webkit prefix? I had trouble early on because I'm on Firefox30 and it doesn't like the moz prefix that was tolerated in the gradients section.