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

Design

Maureen O'Neal
Maureen O'Neal
12,930 Points
Posted by Maureen O'Neal
Maureen O'Neal
12,930 Points

Flexbox columns!

Hi, I'm having some trouble with Flexbox columns. I haven't used Flexbox a lot, but I'd like to.I have got a partial website on Codepen.io that I want to have with three columns. I didn't have to use float, which is nice, but I just can't get the columns to all align with each other at the top. I don't know if I have some conflicts in the CSS, that are making it difficult(or impossible)for the columns to align, and I'd love it if someone could help me out, it would be great, because I'm stymied with this. And I love THE look of three columns, so I'd like to figure it out with Flexbox. Thank you! http://codepen.io/Maureen77/pen/yMarWB

1 Answer

Trevor Stinson
Trevor Stinson
14,801 Points
Trevor Stinson
Trevor Stinson
14,801 Points

The first and most important step will be to fix the flex-direction on your .row class. Right now it's set to column and you need to change it to row. After that, I would recommend removing all of the left and right margins from your columns; those margins are taking up space and causing the flexbox items to get pushed down. Remove the margin (and also the absolute widths) and let flexbox work its magic. I believe padding will give you the space you need without messing up the columns. You could also use justify-content to leverage flexbox for column spacing.

Additionally, make sure the row div in your HTML is closed. It's open right now, which is why your footer is getting grouped with the other items. I would also remove all of the bottom margins from your flex items and use a different method for making a sticky footer (a couple methods are covered in the course videos if you haven't seen them yet).

Maureen O'Neal
Maureen O'Neal
12,930 Points
Maureen O'Neal
Maureen O'Neal
12,930 Points

Oh, it worked!! Thank you SO much! And I'll use padding instead of margins. Thanks again! You helped a lot!