html - 在一行中使用flexbox，左对齐和右对齐元素

在过去，我会使用两个容器，并使用clearfix向左 float 一个，向右 float 另一个。但是我认为该方法有些过时了，现在可以很好地支持flex功能。

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

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



这是我的标记:

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

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

最佳答案

您可以只使用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执行此操作