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

Question

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

Проблема в том, что я понятия не имею, как это сделать, используя flex.

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

Вот разметка у меня есть:

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

Может кто-нибудь сказать мне, что CSS прогибается методы, которые я должен использовать здесь?

Answer 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>

Update: Вы также можете сделать это без span с margin-left: autoDEMO

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