Comment aligner un élément à gauche et un autre au centre avec Flexbox sans positionnement absolu ?

Alignement à gauche et au centre avec Flexbox : une solution sans positionnement absolu

Lorsque vous utilisez flexbox pour aligner des éléments enfants, il peut être difficile d'aligner un élément à gauche et centrez l'autre sans utiliser le positionnement absolu. Voici une solution qui utilise un élément vide supplémentaire :

HTML :

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

CSS :

<code class="css">.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;
}</code>

Explication :

1. Les éléments gauche et droit sont configurés pour flex : 1, ce qui les fait grandir pour répartir également l'espace disponible.
2. L'élément droit vide garantit que l'élément de gauche ne décentrera pas l'élément central.

Cette approche crée un alignement cohérent et centré sans avoir besoin d'un positionnement absolu ou de duplication du contenu de gauche sur la droite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!