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

Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points
Posted by Truong Minh Nguyen
Truong Minh Nguyen
12,587 Points

Aligning button with align-self

Using align-self, the button is moved to the bottom left of the container if the value is flex-start. But the flex direction for the container is column, so shouldn't flex-start be the top of the container instead?

1 Answer

Louise St. Germain
Louise St. Germain
19,424 Points
Louise St. Germain
Louise St. Germain
19,424 Points

Hello Truong,

Good question! It isn't actually align-self that is causing the buttons to move to the bottom. If you start the video around 2:48 and go to 3:22, you see that he has used the following code to push the buttons to the bottom of the container:

.button {
    margin-top: auto;
}

This essentially creates a top margin for the button that expands until the button hits the bottom of the container - which pushes it to the bottom where you want it.

align-self is relative to the cross axis. Note that because the main axis is now vertical (since flex-direction was set to column, as you noticed), the cross axis is now horizontal, and still runs in the default direction from left to right because there were no instructions to reverse it. So flex-start for this axis (i.e., the cross axis here) is on the left.

I hope this helps - let me know if there is still any confusion!

angiejang
angiejang
3,134 Points

then how come we can't adjust vertical alignment with justify content?