在一行中使用 flexbox，左对齐和右对齐元素答案

【问题标题】：Using flexbox, left-align and right-align elements in one row在一行中使用 flexbox，左对齐和右对齐元素
【发布时间】：2016-09-05 21:52:28
【问题描述】：

在过去，我会使用两个容器并使用 clearfix 向左浮动另一个向右浮动。但我认为这种方法有点过时了，现在已经很好地支持了 flex 功能。

问题是我不知道如何使用 flex 进行布局。

这是带有一些按钮的屏幕截图。次要操作左对齐，其他两个主要操作应右对齐。

这是我的标记：

<footer>
    <button>Back</button>
    <span class="primary-btns">
        <button>Cancel</button>
        <button>Go</button>
    </span>
</footer>

谁能告诉我应该在这里使用哪些 CSS flex 方法？

【问题讨论】：

【解决方案1】：

你可以使用justify-content: space-between

footer {
  display: flex;
  justify-content: space-between;
}

<footer>
  <button>Back</button>
  <span class="primary-btns">
    <button>Cancel</button>
    <button>Go</button>
  </span>
</footer>

更新：您也可以在不使用 span 的情况下使用 margin-left: auto DEMO 进行此操作

【讨论】：

【解决方案2】：

在这种情况下，您甚至不需要嵌套容器。

现代 CSS 技术（flex 和 grid）使这种布局变得简单，并且只需要一个容器。

footer {
  display: flex;
}

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

button {
  margin: 5px;
}

<footer>
  <button>Back</button>
  <button>Cancel</button>
  <button>Go</button>
</footer>

Flex 自动边距消耗指定方向上的所有可用空间。

这也可以：

button:nth-child(2) { margin-left: auto }

所有关于自动边距的信息：Methods for Aligning Flex Items

【讨论】：