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 CSS Flexbox Layout Building a Layout with Flexbox Aligning Items to the Bottom of a Column

Posted by Jasper Kop
Jasper Kop
10,423 Points

why is the auto top margin moving the button down?

I wonder why the auto top margin is moving the button down?

when I was thinking about the question van Gail I had some idea's but after trying them it didn't work out of course, but I don't understand the auto top margin why it works

2 Answers

Jim Camomile
Jim Camomile
362 Points

Hi 2pd, The key to your question is that the item, in this case the button, needs to be a (flex item), then when you apply margin-top: auto; to your button it will take up all the (space available) around itself therefore pushing the item to the bottom of the box, just like you would use margin-left: auto; and margin-right: auto; it centers the item, but if you take away margin-left: auto; the item will move all the way to the left of the container it's in, I recommend watching the video again, also try using the code in different scenarios to understand it better.

Happy coding, Cheers!

Unsubscribed User
Unsubscribed User
5,387 Points

Thanks for the answer Jim!

Samet Erpik
Samet Erpik
1,187 Points
Samet Erpik
Samet Erpik
1,187 Points

You can set the margin property to auto to horizontally center the element within its container.

2pd
2pd
8,123 Points

How does your comment explain why the buttons move to the bottom of the container?