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


advanced flex box


I just programming my first homepage and got following problem:

I have a parent div with 3 children. <div> <child_1> <child_2> <child_3> </div>

I want to flex them. The first item should be on the left, the other two should be under each other on the right. So item 2 on the right top, the third item on the right bottom.


So I wonna flex them on one way "normal" (horizontally -> display:flex) and on the other way vertically (->flex-direction: column).

Is there a way to do it, not to use an additional parent div(for item 2&3), because that will screw up my code on my next issue?!

My bad, should look like this:



2 Answers

Dean Wagman
Dean Wagman
21,591 Points

Hmmm, I understand what you are trying to do.

I think the problem is that this is more of a "Grid" rather than a flex-box.

If you set the children to float I think you can achieve what you are trying to accomplish.

    width: 100%;
    height: 600px;
    width: 50%;
    height: 300px;
    float: left;
     height: 600px;

That´s a very good solution. Sometimes it´s much easier than you think! :)

Thanks a lot!