Comment espacer correctement les éléments Flexbox à l'aide de CSS ?

Comment ajuster la distance entre les éléments Flexbox avec CSS

Définition de la distance minimale entre les éléments flexbox en utilisant la marge : 0 5px et la marge : 0 - 5px peut sembler une solution de contournement. Cependant, il existe des propriétés CSS dédiées conçues à cet effet :

Propriété CSS gap :

Dans les navigateurs modernes, la propriété gap est disponible pour les multi-colonnes, flexbox, et les dispositions en grille. Il définit l'espace entre les lignes et les colonnes :

#box {
  display: flex;
  gap: 10px;
}

Propriété CSS row-gap :

Pour les dispositions flexbox et grille, row-gap définit l'espace entre lignes :

#box {
   display: flex;
   row-gap: 10px;
}

espace de colonne CSS Propriété :

Dans les dispositions multi-colonnes, flexbox et grille, l'espacement des colonnes spécifie l'espace entre les colonnes :

#box {
  display: flex;
  column-gap: 10px;
}

Exemple :

Pour illustrer l'utilisation, considérons le code suivant :

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div>

Ceci le code crée une flexbox avec quatre éléments gris, espacés uniformément par un espace de 10 pixels.

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!