CSS CSS Flexbox Layout Building a Layout with Flexbox Aligning Items to the Bottom of a Column

Truong Minh Nguyen
Truong Minh Nguyen
12,574 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,407 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!

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