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

Why doesn't justify-content: flex-end work on the button?

I understand you can't use align-self on the button as the axis was swapped when you switch to column...but why does justify-content: flex-end; not work as this would target the axis you are trying to work on? This just seems more intuitive to me than messing with margins.

Ok I just realized that justify-content only works on the flex container...but, is there some sort of equivalent to "align-self" for flex items on the main axis?

1 Answer

Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

No, that's where margins come in.

Flex-container properties for aligning items:

justify-content: ;
align-content: ;
align-items: ;

Flex-items properties for aligning individual items:

align-self: ;
/* margin properties */