Flexbox: elemento centrato con elementi di spazio su entrambi i lati

Question

Uso Flexbox per impostare un menu composto da sette elementi <li> con varie larghezze. Mi piacerebbe che il mio elemento centrale (il 4 ° nell'origine) <li> fosse sempre centrato orizzontalmente come una sorta di ancora, con gli elementi 1-3rd <li> che occupano lo spazio a sinistra del centrato <li> e il 5 ° -7 ° occupando il spazio a destra.

Ho provato space-around, space-between sul contenitore flessibile genitore così come align-self: center sull'elemento <li> che sto cercando di centro, ma finora senza fortuna. Sarebbe gradito qualsiasi aiuto da parte di qualcuno esperto in flexbox.

jsfiddle

Answer 1

è necessario modificare la struttura nav e ripartire da 3 contenitori lasciato, centro e destra. DEMO

---

HTML

sinistra e destra terrà un po 'di link, centro è un collegamento.

<nav> 
<span> 
    <a href="#">aaa </a> 
    <a href="#">aa </a> 
    <a href="#">a </a> 
    </span> 
    <a href="#"> center </a> 
    <span> 
     <a href="#">bbbb </a> 
     <a href="#">bbbbb </a> 
     <a href="#">bbbbbb </a> 
    </span> 
</nav> 

---

CSS

nav avrà display:flex e justify-content:space-between, così sarà sinistra e destra.

nav, nav span { 
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap;/* so they do not overlap each other if space too short */ 
} 

Per generare un vuoto ai bordi della destra e sinistra verso il centro, basta aggiungere un elemento pseudo (o un elemento vuoto).

span:first-of-type:after, 
span:last-of-type:before{ 
    content:''; 
    display:inline-block;/* enough , no width needed , it will still generate a space between */ 
} 

sinistra e destra può prendere un flex valore più elevato di 1, per evitare centro per espandere troppo.

nav > span { 
    flex:2; /* 2 is minimum but plenty enough here */ 
} 

lascia trarre le nostre scatole di collegamento:

a { 
    padding:0 0.25em; 
    border:solid; 
} 

---

DEMO

Answer 2

penso che il modo per farlo è quello di dividere gli oggetti in tre diverse ul elementi, e quindi utilizzare la proprietà flex per impostare la dimensione delle tre colonne.

Le colonne esterne contengono tre elementi, quindi ricevono flex:3. La colonna centrata ha solo un elemento, quindi diventa flex:1. In questo modo, quando ridimensioni, flexbox utilizzerà 3 unità flessibili per le colonne più grandi e 1 unità flessibile per la colonna centrata. Se è necessario utilizzare un numero diverso di elementi in una delle colonne, è sufficiente modificare l'unità flex per riflettere il numero di elementi presenti al suo interno.

violino di lavoro: jsfiddle