Alignez les éléments à gauche et au centre à l'aide de Flexbox

Question

J'utilise Flexbox pour aligner mes éléments enfants. Ce que je veux faire, c'est centrer un élément et aligner l'autre élément à gauche. Normalement, j'utiliserais margin-right: auto pour définir l'élément de gauche. Le problème est d'éloigner l'élément central du centre. Est-ce possible sans utiliser le positionnement absolu ?

HTML et CSS

#parent {
  aligner les éléments : centre ;
  bordure : 1px noir uni ;
  affichage : flexible ;
  justifier-contenu : centre ;
  marge : 0 automatique ;
  largeur : 500 px ;
}
#gauche {
  marge droite : auto ;
}
#centre {
  marge : auto ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="parent">
  <span id="left">Gauche</span>
  <span id="center">Centre</span>
</div>

Answer 1

Ajouter un troisième élément vide :

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

et les styles suivants :

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Seules la gauche et la droite grandiront, et de ce fait...

• Il n'y a que deux éléments en croissance (peu importe s'il est vide) et
• Les deux ont la même largeur (ils répartiront uniformément l'espace disponible)

...L'élément central sera toujours parfaitement centré.

À mon avis, c'est bien mieux que la réponse acceptée car vous n'avez pas besoin de copier le contenu de gauche vers la droite et de le masquer pour obtenir la même largeur des deux côtés, cela arrive comme par magie (la flexbox est magique).

---

Fonctionnement pratique :

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Answer 2

EDIT : Voir Réponse de Solo ci-dessous, qui est une meilleure solution.

---

L'idée derrière flexbox est de fournir un cadre permettant d'aligner facilement des éléments à dimensions variables dans un conteneur. Cela n’a donc aucun sens de proposer une mise en page qui ignore complètement la largeur d’un élément. Essentiellement, c'est à cela que sert le positionnement absolu, car il retire l'élément du flux normal.

Pour autant que je sache, il n'y a pas de bon moyen de le faire sans utiliser position:absolute; donc je recommande de l'utiliser... mais si vous ne voulez vraiment pas faire cela ou ne pouvez pas utiliser le positionnement absolu, alors je pense que vous pouvez utiliser l'une des solutions de contournement suivantes.

---

Si vous connaissez la largeur exacte du div "gauche", alors vous pouvez mettre justify-content 更改为 flex-start (gauche) puis aligner le div "centre" comme ceci :

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

---

Si vous ne connaissez pas la largeur alors vous pouvez copier "Gauche" à droite, utiliser justify-content: space- Between; puis masquer le nouvel élément de droite : Pour être clair, c'est vraiment, vraiment moche... il vaut mieux utiliser le positionnement absolu que de copier le contenu. :-)

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>