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 rbmelanie
rbmelanie
5,338 Points

Flex box - Flex-grow and justify-content do not apply

I will be trying to reproduce a newspaper layout with flex box soon (and then with multicolumn layout) but I am having issue even with 3 simple columns.

I created a simple html doc, with 3 articles. When I try to apply flex-grow, or justify-content, the properties do not seem to apply at all. I thought it was because of a misspelling, or something not closed but I didn't find anything. I even tried replacing the sections by divs... . I tested with Chrome and Firefox.

The Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
        <div class="flex">
        <section class="article one">
            <h1>SOMETHING HAPPENED</h1>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut tincidunt nisi, eget dignissim dolor. Sed laoreet fermentum ante nec tincidunt. Nullam fermentum nulla ac nunc auctor, vitae maximus libero vehicula. In tempor sodales laoreet. Suspendisse quis tristique felis. Etiam non metus non nunc convallis porttitor. Morbi sed ipsum pulvinar risus dapibus sagittis vitae ultricies ipsum. 
            </p>
        </section>
        <section class="article two">
            <h3>Something else happened</h3>   
            <p> Sed at sapien ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non libero quis turpis ultrices convallis eu in nibh. Donec sit amet erat laoreet, efficitur sapien nec, feugiat odio. Etiam pulvinar molestie lectus, vel consectetur eros  quis. Integer a ipsum neque. Vivamus in feugiat nibh, nec commodo urna. Donec id volutpat erat. Mauris ultrices interdum purus nec feugiat. Mauris  vel lorem sed ornare.
            </p>
        </section>
              <section class="article three">
            <h3>Somthing else happened. Again.</h3>   
                       <p> Sed at sapien ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus non libero quis turpis ultrices convallis eu in nibh. Donec sit amet erat laoreet, efficitur sapien nec, feugiat odio. Etiam pulvinar molestie lectus, vel consectetur eros posuere quis. Integer a ipsum neque. Vivamus in feugiat nibh, nec commodo urna. Donec id volutpat erat. Mauris ultrices interdum purus nec feugiat. Mauris posuere vel lorem sed ornare.
            </p>
        </section>
    </div>     
</body>
</html>

The CSS: 

html {
    width: 100%;
    margin-top: 0;
}
body {
    background-image: url('../img/bg/pixel_weave.png');
    width: 100%;
    margin: 0 auto;
}
.flex {
    display: flex;
    justify-content: space-between;
}
.article {
    margin: 1%;
}
.one {
    background: #B5AC01;
    flex-grow: 2;
}
.two {
    background: #ECBA09;
}
.three {
    background: #E86E1C;
}

flex-grow:2; never apply. Same when I try to apply another property such as justify-content.

It has too be simple but right now I can't get my head around it. Thanks.

rbmelanie
rbmelanie
5,338 Points

Also not sure why the markdown doesn't display code properly in the question...

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Melanie,

I went ahead and fixed your code formatting for you.

You had your 3 backticks and language correct but you need to have a blank line before the opening backticks and a blank line after the closing backticks.

rbmelanie
rbmelanie
5,338 Points

Noted! Thanks Jason!

4 Answers

Tom Schinler
Tom Schinler
21,052 Points
Tom Schinler
Tom Schinler
21,052 Points

Melanie, I opened a workspace and copied your code. Aside from some needed padding in the articles and your <h1> in the first article not responding well, it seems to work just fine. What is your goal with the code. I adjust screen size and the boxes get longer but maintain width ratio.

Please give us a more clear picture of what you are trying to achieve.

rbmelanie
rbmelanie
5,338 Points
rbmelanie
rbmelanie
5,338 Points

Hi Tom,

I am trying to give the first column (or any column), a different ratio with flex-grow. Right now, I am not controlling at all the size of the columns.

With this code if I try to apply "flex-grow:4;" to a column, it doesn't change it's proportion / width.

Is that clearer?

It seems this property doesn't apply, but I can't figure out why.

Nicholas Hebb
Nicholas Hebb
18,872 Points
Nicholas Hebb
Nicholas Hebb
18,872 Points

I played around with it and looked at the project download for Flexbox: Part 2. It looks like if you set the flex-grow for one flex item then you need to set flex-grow for the others in order for it to work.

So, for your example, I added flex-grow: 1 to both .two and .three and it rendered properly.

Matteo Simeone
Matteo Simeone
13,587 Points
Matteo Simeone
Matteo Simeone
13,587 Points

I did some tests using code you provided and experienced same issue. I tried adding flex-grow property also to both .two and .three classes, as suggested by Nicholas, but didn't worked for me. It was watching Flexbox Part 2 video again that i noticed Guil using the flex shorthand property instead of flex-grow. I fixed the code like that:

.one {
    background: #B5AC01;
    flex: 2;
}

.two {
    background: #ECBA09;
    flex: 1;
}

.three {
    background: #E86E1C;
    flex: 1;
}

and it worked, even if I don't know exactly why... maybe anyone could explain this?