Come allineare al centro un elemento flessibile e allineare a destra un altro usando Flexbox

Question

Sono totalmente nuovo a Flexbox e volevo allineare i pulsanti, ma non riuscivo a vedere come gestire il caso comune con un pulsante allineato al centro e un diritto pulsante allineato sulla stessa riga utilizzando solo Flexbox.

Tuttavia, ho trovato un modo in cui un elemento invisibile allineato a sinistra della stessa lunghezza dell'elemento allineato a destra e il flessibile justify-content con space-between per rendere centrato l'elemento centrale sulla riga.

C'è un modo più diretto con Flexbox?

.flexcontainer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 500px; 
 
    height: 200px; 
 
} 
 
.iteminvisible { 
 
    flex: 0 1 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    visibility: hidden; 
 
} 
 
.itemcenter { 
 
    flex: 0 1 auto; 
 
    width: 150px; 
 
    height: 100px; 
 
    .itemright { 
 
    flex: 0 1 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    }

<div class="flexcontainer"> 
 
    <div class="iteminvisible">Other</div> 
 
    <div class="itemcenter">One</div> 
 
    <div class="itemright">Other</div> 
 
</div>

Answer 1

Da quello che sto rendendo conto, il pulsante che si desidera "galleggiare" destra dovrebbe non essere flex: 0 1 auto ma piuttosto flex: 0 0 auto. Il primo parametro nello stile flex determina se un elemento dovrebbe crescere. Se non vuoi che riempia più spazio del necessario, non dirgli di crescere.

Answer 2

Utilizzare justify-content: space-between con un elemento flessibile invisibile, come descritto nella domanda, è un buon modo per ottenere il layout desiderato. È sufficiente notare che l'elemento centrale può essere centrato solo se entrambi gli elementi sinistro e destro sono di uguale lunghezza (see demo).

Un'altra soluzione da prendere in considerazione è auto margins e absolute positioning. Due vantaggi di questo metodo non sono necessari per il markup extra e il centraggio vero può essere raggiunto indipendentemente dalle dimensioni degli articoli. Uno svantaggio è che l'elemento centrato viene rimosso da document flow (che può essere importante o meno per voi).

.flexcontainer { 
 
     display: flex; 
 
     justify-content: flex-start; /* adjustment */ 
 
     position: relative;   /* new */ 
 
     width: 500px; 
 
     height: 200px; 
 
    } 
 

 
.itemcenter { 
 
     flex: 0 1 auto; 
 
     width: 150px; 
 
     height: 100px; 
 
     position: absolute;    /* new */ 
 
     left: 50%; 
 
     transform: translateX(-50%); 
 
    } 
 

 
.itemright { 
 
     flex: 0 1 auto; 
 
     width: 100px; 
 
     height: 100px; 
 
     margin-left: auto;    /* new */ 
 
    }

<div class="flexcontainer"> 
 
    <div class="itemcenter">One</div> 
 
    <div class="itemright">Other</div> 
 
</div>

Maggiori dettagli qui: Methods for Aligning Flex Items along the Main Axis (vedi scatole # 62-78).

Answer 3

.container { 
     display: flex; 
     flex-direction: column; //this will allow flex-end to move item to the right    
     align-items: center; 
    } 
    .right-item { 
     align-self: flex-end; 
    }