https://www.cnblogs.com/coco1s/p/10910588.html

这篇文章介绍了在普通的布局和在flex布局中,margin: auto的不同点,其最大的区别就是:在flex布局中,margin: auto会让元素在垂直方向也居中,而普通布局中只能让元素水平居中。

在flex布局中,margin: auto会吃掉每个方向上的剩余的空间,所以设置合适的margin可以达到一些特殊的效果,比如,给最后一个flex item设置flex-grow: 1会让它占用主轴上剩余的空间,配合text-align: right可以实现文字靠在最右侧的效果,但是使用margin-left: auto能更简单地实现上述效果。

最后,经过测试发现,在普通布局中,如果仅设置margin-leftauto,元素也会跑到容器最右侧。而单独设置margin-right: auto好像没什么意义,因为元素默认已经在左侧了。

见W3C官方文档:

8.1. Aligning with auto margins

End

标签: css, margin:auto