Welcome to the Treehouse Community
Looking to learn something new?
Jong Kim6,145 Points
how come margin-top: auto; makes item to the bottom? i just don't understand...
I just don't get it, Can anyone please explain with picture on it if possible? if not, how does it work like that?
on the teacher's note it said
A margin value of auto has an effect on flex item alignment because it absorbs any extra space around a flex item and pushes other flex items into different positions.
I guess, in other words, it means the "margin: auto" will eat up all the available space when push itself into the opposite direction in a flexbox environment.
e.g. if we put margin-top: auto, it will eat up all the available space on top of it and push the button to the bottom of that flexbox
margin-top:auto; is not gonna center your element vertically, margin-left:auto; and margin-right:auto; can be used to horizontally center the element but don't try it with vertical alignment