Comment puis-je centrer un élément intermédiaire entre des éléments frères et sœurs de taille dynamique ?

Centrage de l'élément central avec des largeurs de frères et sœurs dynamiques

Imaginez une disposition composée de trois boîtes alignées horizontalement avec des points représentant l'espacement entre elles :

[Left box]......[Center box]......[Right box]

Lorsque l'une des boîtes latérales est retirée, la boîte centrale doit rester centré :

[Left box]......[Center box].................

Et de même lorsque l'autre boîte latérale est supprimée :

................[Center box].................

De plus, le contenu de la boîte centrale doit s'étendre pour remplir l'espace disponible, tandis que les boîtes latérales restent fixes dans taille. Le débordement sera géré avec overflow : caché et text-overflow : points de suspension pour découper le contenu.

[Left box][Center boxxxxxxxxxxxxx][Right box]

Bien qu'une structure flexbox aligne les éléments horizontalement, elle ne maintient pas le centrage lorsque les boîtes latérales ont des largeurs différentes. Pour obtenir l'effet souhaité, nous introduisons des conteneurs flexibles 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; }

Cette stratégie utilise des marges automatiques pour centrer automatiquement l'élément du milieu, quelle que soit la largeur des cases latérales. Le justifier-content: center; l'alignement garantit que le contenu de la zone du milieu reste centré.

En imbriquant des conteneurs flexibles, nous limitons les marges aux boîtes individuelles, les empêchant d'affecter la disposition des autres éléments. Cette méthode permet d'obtenir un véritable centrage même lorsque les largeurs des cases latérales diffèrent considérablement.

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!