Comment faire pour centrer un conteneur flex mais à gauche-align flex éléments

Flexbox Défi & Limitation

Le défi est au centre d'un groupe de flex éléments de gauche et les aligner sur l'écharpe. Mais si il y a un nombre fixe de cases par ligne, et chaque boîte est de largeur fixe, ce n'est actuellement pas possible avec flexbox.

En utilisant le code affiché dans la question, on pourrait créer un nouveau conteneur flex qui enveloppe le flex conteneur (ul), ce qui nous permettrait de centre de la ul avec justify-content: center.

Puis le flex éléments de la ul pourrait être aligné à gauche avec justify-content: flex-start.

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

Cela crée une centrée sur un groupe d'aligné à gauche flex éléments.

Le problème avec cette méthode est que, à certaines tailles d'écran il y a un écart sur la droite de la ul, il n'a pas été plus centré.

Cela se produit parce que dans flex mise en page (et, en fait, CSS en général) du conteneur:

1. ne sait pas quand un élément wraps;
2. ne sais pas qui a précédemment occupé l'espace est maintenant vide, et
3. ne pas recalculer sa largeur de l'emballage le plus étroit de mise en page.

La longueur maximale de l'espace sur la droite est la longueur de la flexion de l'élément dans le conteneur m'attendais à être là.

Dans la démonstration suivante, par re-dimensionnement de la fenêtre horizontalement, vous pouvez voir les espaces d'aller et venir.

DÉMO

---

Une Approche Plus Pratique

La mise en page souhaitée peut être obtenue sans flexbox à l'aide de inline-block et requêtes de média.

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

Le code ci-dessus rend une à l'horizontale centrée sur le récipient avec de l'alignement à gauche des éléments d'enfant comme ceci:

DÉMO

---

Autres Options

• Correctement dimensionnement et d'alignement de la flex élément(s) sur la dernière ligne

• Desandro Maçonnerie

  Maçonnerie est un code JavaScript de la grille de mise en page de la bibliothèque. Il
  des œuvres de placer des éléments dans la position optimale sur la base d'
  l'espace vertical, un peu comme maçon, montage des pierres dans un mur. Vous avez
  sans doute vu dans l'utilisation de tous sur Internet.

  ^{source: http://masonry.desandro.com/}

• CSS de la Grille de Mise en page du Module de Niveau 1

  Cette CSS module définit une grille à deux dimensions à base de système de mise en page, optimisé pour la conception de l'interface utilisateur. Dans la grille de modèle de mise en page, les enfants d'une grille récipient peut être positionnée à l'arbitraire des fentes dans un prédéfinie flexible ou fixe-taille de la grille de mise en page.

  ^{source: https://drafts.csswg.org/css-grid/}

Un moyen pour obtenir le style désiré et avec des marges est de faire ce qui suit:

#container {
    display: flex;
    justify-content: center;
}

#innercontainer {
    display: flex;
    flex: 0.9; -> add desired % of margin
    justify-content: flex-start;
}