web-dev-qa-db-fra.com

CSS3 Flexbox espacement entre les éléments

Étant quelque peu nouveau pour Flexbox (bien qu'expérimenté en CSS), il me semble qu'une chose commodément "masquée" par la plupart des tutoriels que j'ai lus est l'espacement entre les éléments flexibles.

Par exemple, l'un des tutoriels les plus cités est celui-ci sur CSS Tricks .

C'est très bon et a été utile, des diagrammes comme celui-ci m'ont égaré:

enter image description here

Remarquez les espaces entre les éléments flexibles. Bien qu'il ne soit mentionné nulle part, ni dans l'exemple de code, il semblerait que le seul moyen d'obtenir les espaces soit avec les marges CSS.

Est-ce exact, ou manque-t-il quelque chose d'important ici?

Parce que ce que je dois créer est ceci, un peu comme la démo "centre" ci-dessus: enter image description here

Cependant, quand je l'essaye moi-même, j'obtiens bien sûr ceci: enter image description here

si j'utilise l'espace autour, je l'obtiens à la place. Immense espace. enter image description here

Par conséquent, il semble que je doive ajouter une marge à droite aux 2 premières cases pour obtenir 3 cases centrées avec un petit espace entre elles.

Est-ce simplement un mauvais cas d'utilisation pour Flexbox? Parce que je vois peu d'avantages à créer mes 3 boîtes avec Flexbox par rapport à l'utilisation de marges et de centrage simples.

Suis-je en train de manquer quelque chose d'évident ici?

htmlcsscss3flexbox
18
Steve
.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}
<div class='container'>
  <div class='rope'>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
2
Mohammed Moustafa

La spécification CSS a récemment été mise à jour pour appliquer les propriétés gap aux éléments flexbox en plus des éléments de grille CSS. Tous les navigateurs ne le prennent pas encore en charge (- juste Firefox au moment de la rédaction ; la page de suivi des bogues pour l'ajouter à Chrome est ici ), mais cela devrait bientôt être quelque chose que vous pouvez faire avec quelque chose comme column-gap: 10px (ou quelle que soit la taille que vous souhaitez).

0
neurodynamic