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 Richard Poiger
Richard Poiger
14,501 Points

advanced flex box

Hey!

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.

CHILD1 CHILD2 CHILD1 CHILD3

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?!

Richard Poiger
Richard Poiger
14,501 Points

My bad, should look like this:

CHILD1CHILD2

CHILD1CHILD3

2 Answers

Dean Wagman
Dean Wagman
21,591 Points
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. 

.parent{
    width: 100%;
    height: 600px;
}
.child{
    width: 50%;
    height: 300px;
    float: left;
} 
.child:first-child{
     height: 600px;
}
Richard Poiger
Richard Poiger
14,501 Points
Richard Poiger
Richard Poiger
14,501 Points

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

Thanks a lot!