Pourquoi l'espace flexbox-entre ne fonctionne pas?

Je suis en train de mettre en œuvre flexbox, mais ne peut pas le faire fonctionner. Ce qui me manque? J'ai tous les flexbox fournisseur de préfixes en place.

.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;
 }

Le but est d'obtenir le plus à gauche li pour aller rincer à gauche de l'ul du conteneur et le droit de la plupart des li pour aller chasse avec le côté droit de l'ul du conteneur. Toute aide bienvenue.

source d'informationauteur Al-76 | 2015-10-08

  1. 16

    Le problème est que vous devez définir justify-content: space-between; sur l'élément avec display: flex propriété ou pour mieux dire, sur 'parent', si 'enfant' éléments seront alignés avec l'espace entre les uns des autres.

    .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;
}
  2. 8

    Flex propriétés sont réparties entre deux catégories: Les conteneur flex et la flex éléments.

    Certaines propriétés s'appliquent uniquement à l'conteneur, d'autres propriétés s'appliquent uniquement aux éléments.

    La justifier-content propriété s'applique uniquement à un conteneur flex.

    Dans votre code, justify-content est appliqué aux éléments, c'est donc avoir aucun effet.

    Re-assigner à l'conteneur.

    Bien sûr, un élément peut être à la fois un conteneur flex et de l'élément, dans ce cas, toutes les propriétés s'appliquent. Mais ce n'est pas le cas ici. Le li éléments sont uniquement flex éléments et ignore les propriétés du conteneur.

    Pour une liste des propriétés flex – divisé par conteneurs et des objets – voir: Un Guide Complet pour Flexbox

  3. 2

    Plus qu'une chose à garder à l'esprit, en plus de la nécessité de l'ajout de justify-content:space-between le flex conteneur et non aux éléments eux-mêmes; assurez-vous que vous n'avez pas les éléments vides (comme un vide div ou :after) à l'intérieur du conteneur.

    Dans mon cas s'est avéré un JS ajout d'un div vide comme un "clearfix" depuis les jours avant de flex, quand les choses ont été faites éléments flottants.

    justify-content:space-between va justifier pour tous les éléments à l'intérieur du conteneur, même celles n'ayant pas de contenu, ce qui peut gâcher l'alignement et de l'emballage.