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

Posted by Owa Aquino
Owa Aquino
19,277 Points

3 column flex-box

Hi guys!

My goal is to set my third column below and the first and second beside each other when it reaches the min-width of 769px. What do you think wrong with my code? Hope to hear on your thoughts. Below is my codes.

HTML

    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>

CSS

.row {
    border: solid 1px black;
    max-width: 80%;
    margin: 0 auto;
}

.col {
    border: solid 1px black;
    background-color: tomato;
    height: 200px;
    margin: 10px;
}

@media (min-width: 769px) {
    .row{   
        display: flex;
        flex-wrap: wrap;
    }
    .col {
        flex-grow: 1 50%;
    }   
}

@media (min-width: 1020px) {
    .col {
        flex-basis: 0;
    }
}

1 Answer

Sue Dough
Sue Dough
35,800 Points
Sue Dough
Sue Dough
35,800 Points

Okay so I have a few questions.

Are you using bootstrap?

If you are, Why are you using col ? Why not just use something like

col-md-4

Additionally if your using Bootstrap, Bootstrap 4 alpha comes baked with flexbox if you enable it.

Owa Aquino
Owa Aquino
19,277 Points

No im not using Boothstrap or any workframe on this. Im just trying to learn more about flex-box alone.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Why do you make assumptions? Just answer the question :) You're overcomplicating this. It's a simple question.