Posizione ultimo elemento flessibile all'estremità del contenitore

Question

Questa domanda riguarda un browser con supporto css3 completo incluso flexbox.

Ho un contenitore flessibile con alcuni elementi in esso. Sono tutti giustificati per il flex-start ma voglio che lo ultimo.end articolo sia giustificato per il flex-end. C'è un buon modo per farlo senza modificare l'HTML e senza ricorrere al posizionamento assoluto?

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    outline: 1px solid green; 
 
    min-height: 400px; 
 
    width: 100px; 
 
    justify-content: flex-start; 
 
} 
 
p { 
 
    height: 50px; 
 
    background-color: blue; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p class="end"></p> 
 
</div>

Answer 1

Flexible Box Layout Module - 8.1. Aligning with auto margins

margini di auto sulle voci di flessione hanno un effetto molto simile a margini auto nel flusso blocco:

• Durante i calcoli di basi flex e lunghezze flessibili, i margini automatici sono trattati come 0.

• Prima dell'allineamento tramite justify-content e align-self, qualsiasi spazio libero positivo viene distribuito ai margini automatici in tale dimensione.

Pertanto è possibile utilizzare margin-top: auto per distribuire lo spazio tra gli altri elementi e l'ultimo elemento. Questo posizionerà l'elemento in basso.

.end { 
    margin-top: auto; 
} 

Si può anche evitare l'uso di una classe e utilizzare la classe pseudo :last-of-type/last-child.

p:last-of-type { 
    margin-top: auto; 
} 

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    outline: 1px solid green; 
 
    min-height: 400px; 
 
    width: 100px; 
 
    justify-content: flex-start; 
 
} 
 
p { 
 
    height: 50px; 
 
    background-color: blue; 
 
    margin: 5px; 
 
} 
 
.end { 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p class="end"></p> 
 
</div>

Answer 2

Questo Principal Flexbox funziona anche orizzontalmente

Durante i calcoli di basi flex e lunghezze flessibili, margini auto sono trattati come 0.
Prima dell'allineamento t tramite justify-content e align-self, qualsiasi spazio libero positivo viene distribuito ai margini automatici nella dimensione .

L'impostazione di un margine sinistro automatico per l'ultimo elemento farà il lavoro.

.last-item { 
    margin-left: auto; 
} 

Esempio di codice:

.container { 
 
    display: flex; 
 
    width: 400px; 
 
    outline: 1px solid black; 
 
} 
 

 
p { 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 5px; 
 
    background-color: blue; 
 
} 
 

 
.last-item { 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <p class="last-item"></p> 
 
</div>

enter link description here

Questo può essere molto utile per i piè di pagina del desktop.

Come Envato ha fatto qui con il logo dell'azienda.

Codepen Snippet