Использование flexbox, выравнивание по левому краю и выравнивание по правому краю в одной строке

В старые времена я бы использовал два контейнера и поместил один левый, а другой правый - с помощью clearfix. Но я думаю, что этот метод немного устарел, и возможности гибки теперь хорошо поддерживаются.

Проблема в том, что я понятия не имею, как это сделать, используя 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>

Ответ 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>