Comment puis-je contrôler facilement l'espacement entre les éléments Flexbox ?

Gestion de l'espacement des éléments Flexbox

Question :

Dans les mises en page Flexbox, comment puis-je ajuster la distance entre les éléments sans recourir à des techniques complexes marges ?

**Réponse :

Propriété CSS Gap :

Pour les navigateurs avancés, la propriété gap peut être utilisée pour établir l'espacement à la fois verticalement et horizontalement dans les mises en page flexbox, grille et multi-colonnes.

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

CSS Propriété Row-Gap :

Pour l'espacement vertical spécifiquement dans les mises en page flexbox et grille, la propriété row-gap est une option.

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

Propriété CSS Column-Gap :

Dans les mises en page multi-colonnes, flexbox et grille, la propriété column-gap contrôle l'horizontale spacing.

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

Exemple :

L'extrait suivant montre l'utilisation de la propriété gap pour créer un espacement entre les éléments flexbox :

<div>

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

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

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!