Flex layout achieves left alignment of some elements and right alignment of some elements

Time:2021-3-16

There are three inline right aligned buttons in a single flex container. The effect is as follows:

Flex layout achieves left alignment of some elements and right alignment of some elements

If you want to keep the red button to the left and the other two blue buttons to the right

At this time, we can add the following for the red button:margin-right: auto;

The effect is as follows:
Flex layout achieves left alignment of some elements and right alignment of some elements

The principle of this effect is as follows:

margin-rightIf it is not set, the default is 0 and the parent container is 0widthAfter the width is fixed,margin-rightIf the value is auto, the remaining width will be occupied automatically