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 Kathryn Lewis
Kathryn Lewis
7,703 Points

Why doesn't "align-self: flex-end;" on the .main-footer work?

I'm playing around with alternate methods of creating a sticky footer. It seems like with the body being a flex container with flex-direction: column, the flex-end would be the bottom of the viewport. But when I try it out, it aligns the footer somewhere in the middle vertically and all the way on the right side. Why is the flex-end on the right side?

body { display: flex; flex-direction: column; min-height: 100vh; }

.main-footer { align-self: flex-end; }

egaratkaoroprat
egaratkaoroprat
16,630 Points

Hi Kathryn,

This is because align-self: flex-end; puts the box to the end of the cross-line - in case of flex-direction: column this is the right hand side margin edge. When you set the flex-direction to row, it should work the way you intended. Also, check out this awesome guide on css-tricks, it helped me a lot to understand the flexbox concept (I still have a lot to learn tho). https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Kathryn Lewis
Kathryn Lewis
7,703 Points

Thanks Egarat! I was expecting it to align to the main axis, not the cross-axis. It all makes sense now!