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

Seth Duncan
Seth Duncan
11,844 Points
Posted by Seth Duncan
Seth Duncan
11,844 Points

align-self: bottom; not viable here?

Why does the align-self: bottom; not align the button to the bottom here? Why does margin have to be used?

3 Answers

Joseph Dalton
Joseph Dalton
12,489 Points
Joseph Dalton
Joseph Dalton
12,489 Points

Hey Seth,

Like Egarat said, the value bottom is not valid for the align-self property. Here are some alternatives:

/* You probably want the 'flex-end' */
align-self: flex-end;
align-self: baseline;

/* Or, on the parent, you could use this to align all the children */
align-items: flex-end;

Hope that helps!

Davide Lorigliola
Davide Lorigliola
10,949 Points
Davide Lorigliola
Davide Lorigliola
10,949 Points

The property

align-self

aligns the flex items on the cross axis, but here, because of

flex-direction: column;

the cross axis is the horizontal one, and the main axis the vertical one.

So you should use:

.button {
justify-self: flex-end;
}

But this property - unlike "align-self" - is in Working Draft Stage (see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self )

egaratkaoroprat
egaratkaoroprat
16,630 Points
egaratkaoroprat
egaratkaoroprat
16,630 Points

I could not find a bottom value for the align-self property - maybe that's the reason (I haven't done the Flexbox course yet)? But you can try to use the value flex-end instead, maybe this helps you.

Seth Duncan
Seth Duncan
11,844 Points
Seth Duncan
Seth Duncan
11,844 Points

Thanks for the answers. I used "end" and it didn't produce the desired effect either. I'll just stick with margin for now. Its easier anyways!