web-dev-qa-db-fra.com

Supprimez les espaces (espaces) entre plusieurs lignes d'éléments flexibles lorsqu'ils sont enveloppés

J'essaie d'avoir plusieurs articles l'un en dessous de l'autre dans un conteneur de hauteur fixe. Les articles continueront côte à côte s'il ne reste plus d'espace.

C'est l'idée:

J'essaie d'y parvenir en utilisant flexbox, un conteneur avec une hauteur définie, la direction est définie sur column et flex-wrap est wrap:

Le problème est qu’il existe de grands écarts entre les colonnes.

enter image description here

J'ai essayé de régler les deux justify-content et align-items à flex-start, mais c'est probablement la valeur par défaut.

Est-ce qu'il y a un moyen de résoudre ceci?

Voici le code:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}
<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

codepen

htmlcsscss3flexbox
33
j.grima

Un paramètre initial d'un conteneur flex est align-content: stretch.

Cela signifie que plusieurs lignes d'éléments flexibles seront réparties uniformément le long de l'axe transversal.

Pour remplacer ce comportement, appliquez align-content: flex-start Au conteneur.

Lorsque vous travaillez dans un conteneur à une ligne flexible (c'est-à-dire, flex-wrap: nowrap), les propriétés à utiliser pour répartir l'espace le long de l'axe transversal sont align-items et align-self.

Lorsque vous travaillez dans un conteneur multi-ligne flexible (c'est-à-dire, flex-wrap: wrap) - comme dans la question - la propriété à utiliser pour distribuer lignes flexibles (lignes/colonnes) le long de l'axe transversal est align-content.

D'après les spécifications:

8.3. Alignement transversal: les propriétés align-items Et align-self

align-items Définit l’alignement par défaut pour tous les éléments du conteneur flex, y compris les éléments flex anonymes. align-self Permet de remplacer cet alignement par défaut pour des éléments flexibles individuels.

8.4. Lignes d'emballage flexibles: la propriété align-content

La propriété align-content Aligne les lignes d’un conteneur Flex dans le conteneur Flex lorsque l’axe transversal contient davantage d’espace, comme le fait justify-content Pour aligner des éléments individuels dans l’axe principal. Notez que cette propriété n'a aucun effet sur un conteneur flex sur une seule ligne.

La propriété align-content Prend six valeurs:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

Voici la définition de stretch:

stretch

Les lignes s’étirent pour occuper l’espace restant. Si l'espace libre restant est négatif, cette valeur est identique à flex-start. Sinon, l'espace libre est divisé de manière égale entre toutes les lignes, ce qui augmente la taille des croix.

En d'autres termes, align-content: stretch Sur l'axe transversal est similaire à flex: 1 Sur l'axe principal.

56
Michael_B