Comment centrer un article du milieu dans un conteneur Flexbox avec des boîtes latérales inégales ?

Article du milieu centré avec des boîtes latérales asymétriques

Le but est de centrer l'article du milieu dans un conteneur lorsque ses éléments adjacents ont des largeurs différentes, en préservant le bon alignement quel que soit le débordement de contenu.

Utilisation Flexbox

Flexbox fournit une solution utilisant des conteneurs imbriqués et des marges automatiques :

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > div { margin-right: auto; }
.box:last-child  > div { margin-left: auto; }

Explication :

• Le conteneur le plus à l'extérieur est un conteneur flexible qui s'étend horizontalement.
• Chaque élément "box" est également un conteneur flexible, avec son contenu centré.
• "margin-right: auto;" sur l'élément intérieur de la première boîte, il le pousse contre le bord du conteneur, l'alignant ainsi avec le côté gauche.
• "margin-left: auto;" sur l'élément intérieur de la dernière boîte, tirez-le vers la gauche jusqu'au bord du conteneur, en l'alignant avec le côté droit.
• Des styles supplémentaires (par exemple, hauteur, rembourrage) peuvent être ajoutés à des fins de présentation.

Exemple :

<div class="container">
  <div class="box"><div class="inner">short box</div></div>
  <div class="box"><div class="inner">centered box</div></div>
  <div class="box"><div class="inner">looooooooooooooooooooooong box</div></div>
</div>

<p>→ true center</p>

Cette approche aligne l'élément du milieu quelles que soient les largeurs de les cases latérales, même avec un contenu débordant.

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!