Utilizzo di elementi flexbox, allineamento a sinistra e allineamento a destra in una riga

Question

In passato avrei utilizzato due contenitori e fluttuato uno a sinistra e l'altro a destra utilizzando la correzione. Ma penso che il metodo sia un po 'antiquato, con le funzionalità di flex ben supportate ora.

Problema è che non ho idea di come stendere questo utilizzando flex.

Ecco uno screenshot con alcuni pulsanti. L'azione secondaria è allineata a sinistra e le altre due azioni primarie devono essere allineate correttamente.

Ecco il markup che ho:

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

qualcuno può dirmi quello che i CSS metodi flex dovrei usare qui?

Answer 1

Si può semplicemente utilizzare 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>

Aggiornamento: È anche possibile fare questo senza span con margin-left: autoDEMO

Answer 2

Non hai nemmeno bisogno di un contenitore nidificato in questo caso .

Le moderne tecnologie CSS (flex e grid) rendono questo layout semplice e richiedono un solo contenitore.

footer { 
 
    display: flex; 
 
} 
 

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

 
button { 
 
    margin: 5px; 
 
}

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

margini auto Flex consumare tutto lo spazio libero nella direzione specificata.

Questo potrebbe anche funzionare:

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

Tutto su margini auto qui: Methods for Aligning Flex Items