align button to the bottom

margin-bottom: auto; is working if you check the developer tools. The button is taking the rest of the available space and it becomes the button's bottom margin. The same is happening when you apply margin-top: auto; , the rest of the extra space is given to the buttons top margin and therefore it is pushed down like we see in the video.

As guil explained in a previous video The best way to make a flex-item centred was to give it a margin of auto. Here; we want the button to be at the bottom of the flex container s thats why we give it a margin-top :auto; Where 'Auto' means the browser should space it out from the the above element. Using a foxed margin of 0, the browser wouldn't know how to space the flex item margins correctly.

I heard previously that with flexbox the best practice is to "do it the flexbox way".

I found that to be great advice as I was(am) struggling to understand flexbox principals. There are quite a few seemingly alternate/traditional methods that tend to work unexpectedly when applied to flexbox. If there is flexbox property use that one first as often as possible.

I had to keep reminding myself too that flexbox spaces out its flex items automatically. So margin-bottom 0 does not work because of the spacing that flexbox has already applied taking precedence. By using margin auto you basically are "clearing" your element. That is why it then sits below the longest column.