Comment puis-je centrer un élément central dans une mise en page Flexbox avec des éléments latéraux de taille inégale ?

Centrer l'élément du milieu au milieu de différentes largeurs d'éléments latéraux

Dans une disposition de boîte flexible, aligner parfaitement l'élément central peut être difficile lorsque les éléments latéraux ont différentes largeurs. Pour résoudre ce problème, nous pouvons utiliser des conteneurs flexibles imbriqués avec des marges automatiques.

Les concepts clés derrière cette approche sont :

• L'utilisation de conteneurs flexibles imbriqués garantit que les éléments sont répartis au sein et entre les cases comme vous le souhaitez.
• L'application de marges automatiques au conteneur interne dans les cases gauche et droite ajuste automatiquement la position pour centrer le milieu item.

Voici le code démontrant cette technique :

.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;
}

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

Dans ce code, le conteneur est défini comme une flexbox, et les boîtes sont des éléments flexibles avec un ratio de flexibilité de 1. Chaque boîte utilise une flexbox imbriquée pour centrer son contenu.

L'étape clé consiste à définir les marges automatiques sur le conteneur interne dans le premier et dernières cases. Pour le côté gauche, margin-right : auto ; ajuste automatiquement l'espace à droite de l'élément, tandis que margin-left: auto; fait de même sur le côté gauche. Cela garantit que la boîte centrée reste centrée, quelle que soit la largeur des boîtes latérales.

En utilisant cette approche, vous pouvez obtenir un véritable centrage de l'élément central, même lorsque les éléments latéraux ont des largeurs différentes.

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!