在一行中使用flexbox，left-align和right-align元素

Question

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

问题是我不知道如何使用flex来解决这个问题。

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

这是我的标记：

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

有人可以告诉我在这里应该使用哪些CSS flex方法吗？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：您也可以在span DEMO

的情况下margin-left: auto执行此操作

Answer 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