If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.

    如果你给flex布局的子容器设置margin为auto，那么指定了marin的那一侧会自动延展至占据容器的剩余空间，如果你设置margin-left: auto, 那么左边的marin会延展为容器的剩余空间，子容器被推向右边
    如果同时设置margin-left: auto和margin-top: auto, 那么子容器会被推向父容器的右下角
    image.png
    参考：https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/