web-dev-qa-db-fra.com

Espace égal entre les éléments flexibles

Existe-t-il un moyen de mettre une unité d'espace complète des deux côtés de tous les articles, y compris le premier et le dernier?

J'essaie de trouver un moyen d'avoir un espacement égal autour de flexbox children.

Dans cet article il semble que la chose la plus proche soit justify-content: space-around. Il dit que:

space-around: les éléments sont répartis uniformément sur la ligne avec un espace égal autour d'eux. Notez que visuellement les espaces ne sont pas égaux, car tous les éléments ont un espace égal des deux côtés. Le premier élément aura une unité d'espace contre le bord du conteneur, mais deux unités d'espace entre l'élément suivant car cet élément suivant a son propre espacement qui s'applique.

htmlcsscss3flexbox
11
Alexis

Il existe au moins deux méthodes pour un espace égal entre tous les éléments, y compris le premier et le dernier éléments. Cependant, une méthode ne prend pas encore totalement en charge le navigateur.

pseudo-éléments

Notez cette section de la documentation de Firefox:

In-flow ::after et ::before les pseudo-éléments sont maintenant des éléments flexibles .

En fait, tous les principaux navigateurs considèrent les pseudo-éléments d'un conteneur flexible comme des éléments flexibles.

Sachant cela, ajoutez ::before et ::after à votre conteneur.

Avec justify-content: space-between et les pseudo-éléments de largeur nulle, les éléments flexibles visibles apparaîtront régulièrement espacés.

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

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

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

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}
<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

space-evenly

Le CSS Box Alignment Module , qui est la proposition inachevée du W3C d'établir un ensemble commun de propriétés d'alignement à utiliser sur tous les modèles de boîtes, fournit le space-evenly valeur à utiliser avec le justify-content et align-content Propriétés.

4.3. Alignement distribué: les stretch, space-between, space-around, et space-evenly mots-clés

space-evenly

Les sujets d'alignement sont répartis uniformément dans le conteneur d'alignement, avec un espace pleine taille à chaque extrémité.

Les sujets d'alignement sont répartis de sorte que l'espacement entre deux sujets d'alignement adjacents, avant le premier sujet d'alignement et après le dernier sujet d'alignement soit le même.

Cependant, au moment de la rédaction de cet article, il semble que space-evenly ne fonctionne que dans Firefox et Chrome.

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

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}
<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

En outre, voici une démonstration utile du MDN justify-content page pour tester space-evenly et d'autres valeurs dans votre navigateur. https://jsfiddle.net/gkrsr86n/

13
Michael_B

Vous pouvez le faire en définissant le padding du conteneur flex et le margin des éléments flex:

.container { 
  display: flex;   
  padding: 0 1%;
}
.item { 
  flex: 1; 
  margin: 0 1%;
}

https://codepen.io/danieldilly/pen/PjgRbe

8
Daniel D

Dans Firefox uniquement, il y a un space-evenly la valeur pour justify-content qui fait cela.

C'est dans le projet de travail CSS3

https://www.w3.org/TR/css-align-3/#valdef-align-content-space-evenly

div {
  display: flex;
  height: 100px;
  justify-content: space-evenly;
  border: 1px solid black;
  margin: auto;
}
span {
  width: 20%;
  background: red;
}
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
1
Michael Coker

Ceci est un cas d'utilisation parfait pour flex-basis et justify-content: space-between si vous savez à l'avance combien de composants seront dans votre rangée. Spécifiez un pourcentage de base flexible sur vos éléments flexibles qui totalise moins de 100% pour tous les articles. Les pourcentages restants deviendront des marges.

Pas d'éléments psuedo, de sélecteurs enfants ou de rembourrage/marge.

div {
  display: flex;
  justify-content: space-between;
  height: 100px;


}
span {
  flex-basis: 32%;
  background: red;
}
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
0
J.McLaren

Vous pouvez essayer ceci:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.list_wrap {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid purple;
  padding-top: 5px;
}
.list_item {
  width: 24%;
  margin-right: 0.8%;
  margin-bottom: 5px;
  height: 30px;
  border: 1px solid green;
}
.list_item:nth-child(4n+1) {
  margin-left: 0.8%;
}
<div class="list_wrap">
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
  <div class="list_item"></div>
</div>
0
itacode