web-dev-qa-db-fra.com

Comment démarrer une nouvelle colonne dans une mise en page d'habillage de colonne flexible

Je veux que mes données soient organisées en colonnes (de haut en bas, de gauche à droite) et chaque en-tête à l'intérieur des données devrait commencer une nouvelle colonne. Il y a trois contraintes:

  • Doit utiliser flex (j'ai besoin d'utiliser une fonctionnalité spécifique à flex)
  • Impossible de regrouper les données (par exemple, envelopper tous les éléments de données dans une seule division)
  • Impossible de définir une hauteur fixe

Ma question est de savoir comment puis-je forcer un saut de colonne dans un flex-flow: column mise en page enveloppante?

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid .head {
  width: 25%;
  background: orange;
  border-bottom: thin dotted;
}
.grid .data {
  width: 25%;
  background: yellow;
  border-bottom: thin dotted;
}
/* my attempt to solve this */
.grid {
  height: 76px;
}
<div class="grid">
  <div class="head">Column 1 (3 items)</div>
  <div class="data">item 1-1</div>
  <div class="data">item 1-2</div>
  <div class="data">item 1-3</div>
  <div class="head">Column 2 (4 items)</div>
  <div class="data">item 2-1</div>
  <div class="data">item 2-2</div>
  <div class="data">item 2-3</div>
  <div class="data">item 2-4</div>
  <div class="head">Column 3 (2 items)</div>
  <div class="data">item 3-1</div>
  <div class="data">item 3-2</div>
  <div class="head">Column 4 (1 items)</div>
  <div class="data">item 4-1</div>
</div>
csscss3flexbox
28
Salman A

Apparemment, la bonne solution consiste à utiliser le break-before ou break-after propriété :

Un saut est forcé partout où le CSS2.1 saut de page avant / saut de page après [CSS21] ou le CSS3 coupure avant / break-after [CSS3-BREAK] les propriétés spécifient une rupture de fragmentation.

Au moment de la rédaction, la plupart des navigateurs implémentent le *-break-* propriétés incorrectes ou ne les implémentent pas du tout. Considérez cette réponse à l'avance.

La démo suivante fonctionne dans:

  • FF33
.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid .head {
  width: 25%;
  background: orange;
  border-bottom: thin dotted;
}
.grid .data {
  width: 25%;
  background: yellow;
  border-bottom: thin dotted;
}
/* force column breaks */
.grid .head:nth-child(n + 2) {
  page-break-before: always; /* FF33 */
}
<div class="grid">
  <div class="head">Column 1 (3 items)</div>
  <div class="data">item 1-1</div>
  <div class="data">item 1-2</div>
  <div class="data">item 1-3</div>
  <div class="head">Column 2 (4 items)</div>
  <div class="data">item 2-1</div>
  <div class="data">item 2-2</div>
  <div class="data">item 2-3</div>
  <div class="data">item 2-4</div>
  <div class="head">Column 3 (2 items)</div>
  <div class="data">item 3-1</div>
  <div class="data">item 3-2</div>
  <div class="head">Column 4 (1 items)</div>
  <div class="data">item 4-1</div>
</div>

Version Chrome 73.0.3683.75

Ne respecte pas le saut de colonne:

Column Break

9
Salman A

Je ne pense pas qu'il existe un moyen de le faire avec flexbox, cependant, si nous utilisons column-count nous pouvons profiter des propriétés:

"break-before", "break-after", "break-inside"

En particulier:

Nous pouvons définir break-before: column; sur chaque élément 'head', où la valeur colonne signifie:

Toujours forcer un saut de colonne avant la boîte générée.

(de même si nous utilisions break - après : la colonne forcerait un saut de colonne après la boîte générée)

NB: Le support du navigateur est actuellement limité à IE (!!)

VIOLON (IE uniquement)

Notez que dans le violon ci-dessus pour IE il semble y avoir un problème de positionnement (bug?) Donc j'ai placé du code dans une requête média spéciale qui n'affecte que IE = pour ne pas affecter les autres navigateurs

1
Danield

Si vous pouvez ajouter dynamiquement un div avant chaque tête (sauf la première), cela peut être possible. Les crédits vont à Tobias Bjerrome Ahlin . Testé sur Chrome, Firefox, Safari et IE11.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 200px;
}

.item {
  background-color: #A2CBFA;
  border: 1px solid #4390E1;
  margin: 2px;
}

.break {
  flex-basis: 100%;
}
<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="break"></div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="break"></div>
  <div class="item">item 6</div>
  <div class="break"></div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
</div>
1
Moussa