Flex布局实现一部分元素左对齐，一部分右对齐

单个Flex容器内有三个靠右对齐的按钮，如图：

display: flex;
justify-content: flex-end;

 

现在需让红色按钮靠左，而另外两个蓝色按钮保持靠右：

方法一：

为红色按钮单独加上：flex: 1;

原理是：利用flex:1，动态填充宽度。

 方法二：

为红色按钮单独加上：margin-right : auto；

原理：margin-right 不设置的话默认是0，父容器width 定宽之后，margin-right取值为 auto ，则自动占据了剩余的全部宽度。