如何用Flex布局使首个按钮居左其余按钮居右？

现有一个使用flex布局的div容器，需求是让首个按钮居左，其余按钮居右。当前HTML结构如下：

<div class="container">
  <button class="first-button">Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

对应CSS代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

目前所有按钮都显示在右侧，需要调整实现首个按钮居左、其余靠右的效果。

可以通过给首个按钮添加margin-right: auto来实现，这是flex布局中实现元素两端分布的常用技巧：

.container {
  display: flex;
  flex-direction: row;
}

.first-button {
  margin-right: auto;
}

原理说明 #

在flex容器中，设置了margin-right: auto的元素会自动占据容器内的剩余可用空间，从而将后续的所有元素挤向容器的右侧，刚好满足首个按钮居左、其余按钮靠右的需求。

如果保留原CSS中的justify-content: flex-end也不影响效果，auto margin的优先级会高于justify-content属性。

内容的提问来源于stack exchange，提问作者Mark