Perché lo spazio della Flexbox non funziona?

Question

Sto cercando di implementare la tecnologia flexbox ma non riesco a farlo funzionare. Cosa mi manca? Ho tutti i prefissi dei fornitori di flexbox sul posto.

.main-navigation ul { 
    width:100%; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
    display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
    } 

.main-navigation ul li { 
    justify-content:space-between; 
    width:100px; 
    background:#666; 
    display:block; 
} 

L'obiettivo è quello di ottenere il più a sinistra li per andare a filo con la sinistra del contenitore della UL e il diritto più li di andare a filo con il lato destro del contenitore del ul. Qualsiasi aiuto benvenuto.

Answer 1

Il problema è che è necessario impostare justify-content: space-between; sull'elemento con display: flex proprietà o meglio dire su "padre", quindi gli elementi "figlio" saranno allineati con lo spazio tra loro.

.main-navigation ul { 
    width: 100%; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
    display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
} 

.main-navigation ul li { 
    width: 100px; 
    background: #666; 
    display: block; 
} 

Answer 2

proprietà Flex sono divisi tra due categorie: Il flex contenitore e gli elementi flex.

Alcune proprietà si applicano solo al contenitore, altre proprietà si applicano solo agli articoli.

La proprietà justify-content si applica solo a un contenitore flessibile.

Nel codice, justify-content viene applicato agli elementi, quindi non ha alcun effetto.

Riassegnarlo al contenitore.

Ovviamente, un elemento può essere sia un contenitore flessibile che un articolo, nel qual caso si applicano tutte le proprietà. Ma non è questo il caso. Gli elementi li sono solo elementi flessibili e ignoreranno le proprietà del contenitore.

Per un elenco delle proprietà di flessione – divise da contenitori e oggetti – see: A Complete Guide to Flexbox

Answer 3

Una cosa da tenere a mente, aggiuntivo alla necessità di aggiungere justify-content:space-between al contenitore flessibile e non agli elementi stessi; Assicurati di non avere elementi vuoti (come un vuoto div) all'interno del contenitore.

Nel mio caso risultava un JS che aggiungeva un div vuoto come "clearfix" dai giorni precedenti al flex, quando le cose erano fatte con elementi fluttuanti.

justify-content:space-between giustificherà per tutti gli elementi all'interno del contenitore anche quelli senza contenuto, che possono rovinare l'allineamento e l'avvolgimento.