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 trialMaureen O'Neal
12,930 PointsFlexbox 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
14,801 PointsThe 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
12,930 PointsMaureen O'Neal
12,930 PointsOh, it worked!! Thank you SO much! And I'll use padding instead of margins. Thanks again! You helped a lot!