Flexbox justify-content

Bonjour
j'utilise les flexbox depuis un an maintenant et je trouve cela formidable.
Je me demande par contre s'il n'y a pas un bug.
Si j'ai 7 boites sur 2 lignes : impeccable ; 4 box sur une ligne et 3 sur l'autre (les 3 étant centré comme defini par le justify-content)
Si j'ai 7 boites sur 3 lignes : 2 lignes avec 3 box impeccables mais la dernière ligne avec l'unique boite est à gauche et donc pas centrée.
Ce qu'il fait bien quand il reste 3 box, il ne le fait pas quand il reste qu'une box.
Alors bug ou quelque chose m'a échappé??
Test fait avec IE11 et google chrome
.contener {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content:space-between;
-webkit-box-align: flex-end;
-moz-box-align: flex-end;
-ms-flex-align: flex-end;
box-align: flex-end;
align-items : flex-end;
flex-wrap:wrap;
margin:15px;
}
contenu { max-width: 160px; text-align: center;}
A+
Modifié par jean202 (25 Mar 2016 - 11:47)

Effectivement, je constate le même effet.

C'est sans certitude, toutefois c'est la seule idée qui me vienne à l'esprit, quand un élément est tout seul sur une ligne (dans notre cas de figure en somme) celui-ci ne peut se centrer.

En fait je pense que les éléments flexibles ne se centrent pas par rapport à leur conteneur mais par rapport à leurs frères.
C'est la propriété space-between qui provoque ceci. Littéralement traduit par "espace entre" sous entendu entre frères.

Lorsque tu as deux éléments sur une ligne, l'espace avant, après et au milieu est identique car chaque élément flexible s'espace par rapport à son frère.

Lorsqu'il est unique sur la ligne, il n'a aucun référent vers lequel se tourner afin de définir son espacement.

Afin de centrer l'élément, je pense qu'il faille avoir recourt aux Media Queries.
Déterminer la largeur minimale à laquelle le phénomène se produit.
Cibler le dernier élément (par exemple .flex>*:last-of-type <- pour un cas généraliste)
Modifier son affichage en passant à un display: block et lui appliquer des marges latérales automatiques (provoque le centrage).

Par contre je ne vois pas s'il est possible de le centrer sans changer le modèle de boite du dernier élément flexible. A creuser peut-être.
Modifié par Greg_Lumiere (25 Mar 2016 - 12:19)

Eurêka !

Le dernier élément peut-être centré en maintenant le contexte de boite flexible.

Je te laisse jeter un œil au code, si besoin d'explications, c'est avec plaisir !

<div class="flex">
  <p style="background:pink;">
    boite 1
  </p>
  <p style="background:orange;">
    boite 2
  </p>
  <p style="background:purple;">
    boite3
  </p>
  <p style="background:gold;">
    boite 4
  </p>
  <p style="background:green;">
    boite 5
  </p>
  <p style="background:blue;">
    boite 6
  </p>
  <p style="background:azure;">
    boite 7
  </p>
</div>

.flex {
  display: flex;
  justify-content: space-between;
  box-align: flex-end;
  align-items : center;
  flex-wrap: wrap;
  margin: 15px;
}
p{
  width: 160px;
  text-align: center;
}
@media all and (min-width: 160px) and (max-width: 480px) {/* 3*160px */
p:last-of-type{
  margin-right: auto;
  margin-left: auto;
  align-self: center;
}
}

Edit: oups j'ai oublié la media querie.
Edit2 : J'ai rajouté une taille minimale pour la requête media.
Modifié par Greg_Lumiere (25 Mar 2016 - 12:34)

Je ne connaissais pas le last-of-type
je vais creuser un peu parce si j'ai 3 puis 3 puis 1 box c'est parfait mais si j'ai 4 puis 3 box, la dernière box se centre sur l'espace restant (qui est equivalent à 2 box) et c'est donc moins bien qu'avant

jean202 a écrit :
Je ne connaissais pas le last-of-type
je vais creuser un peu parce si j'ai 3 puis 3 puis 1 box c'est parfait mais si j'ai 4 puis 3 box, la dernière box se centre sur l'espace restant (qui est equivalent à 2 box) et c'est donc moins bien qu'avant

C'est là que s'impose un petit calcul pour affiner le réglage de la Media Querie.
Disons que là j'ai mis une valeur grossière.
Il faudra peut-être aussi en recréer une seconde, ça va surtout dépendre de ton contenu et de tes attentes du point de vue de l'affichage.

Encore plus de sélecteurs Css : W3Schools - Css Selectors (en anglais)


Edit: Attention dans le calcul, je suis partis sur une taille fixe pour les enfants flexibles mais avec une valeur variable ça risque de te mettre le chien.
Modifié par Greg_Lumiere (25 Mar 2016 - 13:23)

Avec only-child quand je n'ai qu'une box (et pas 7) c'est parfait.
Merci Greg

De rien lucien !