Comment obtenir un espacement cohérent dans Flexbox ?

Espacement égal dans Flexbox : combler l'écart

Un défi courant dans flexbox consiste à obtenir un espacement égal entre les éléments, y compris le premier et le dernier. Bien que la propriété « justify-content : space-around » se rapproche, elle crée un déséquilibre visuel en raison d'un espacement inégal.

Résoudre le dilemme d'espacement

Heureusement, il sont deux méthodes efficaces pour assurer une répartition égale de l'espace.

Méthode 1 : Pseudo-éléments

Les navigateurs modernes traitent les pseudo-éléments ::before et ::after comme des éléments flexibles. En les ajoutant au conteneur, nous pouvons utiliser « justifier-contenu : espace-entre » pour créer une illusion d'espacement égal. Les pseudo-éléments occupent une largeur nulle, laissant un espace égal entre les éléments flexibles visibles.

Code HTML :

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Code CSS :

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before,
flex-container::after {
  content: "";
}

Méthode 2 : Décalage Espacement

Une autre méthode consiste à créer un espacement décalé à l'aide de marges ou de remplissage. Cette approche fonctionne de manière plus cohérente sur tous les navigateurs, mais peut nécessiter des ajustements CSS supplémentaires.

Code HTML :

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

Code CSS :

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

/* Remove margin from first and last items */
flex-container > :first-child {
  margin-left: 0;
}
flex-container > :last-child {
  margin-right: 0;
}

Les deux méthodes égalisent efficacement l'espacement entre les éléments flexibles, offrant ainsi une disposition visuelle uniforme.

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!