Comment faire pour démarrer une nouvelle colonne dans flex colonne envelopper de mise en page

Je veux que mes données organisées en colonnes (de haut en bas, de gauche à droite) et chaque rubrique à l'intérieur les données doivent démarrer une nouvelle colonne. Il y a trois contraintes:

  • Devez utiliser flex (j'ai besoin d'utiliser une fonctionnalité spécifique à la flexion)
  • Ne peut pas regrouper les données (par exemple, envelopper tous les éléments de données à l'intérieur d'un div)
  • Ne peut pas définir la hauteur fixe

Ma question est comment puis-je force un saut de colonne à l'intérieur d'un flex-flow: column envelopper de mise en page?

CSS:

.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;
}

HTML:

<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>

  • C'est probablement l'habitude de répondre à vos besoins, mais j'ai fait ce avec la ligne par défaut de direction et de vide divs... c'est un peu sale.
  • Seriez-vous intéressé à une solution qui utilise column-count? Flex et le nombre de colonnes n'est pas de bien jouer ensemble, mais peut-être que si flex est appliquée sur un élément parent, vous pourriez être en mesure d'utiliser les deux
  • Cela ne marchera pas pour moi, mais ça pourrait aider quelqu'un d'autre avec le même problème.
InformationsquelleAutor Salman A | 2014-11-25
  1. 9

    Apparemment, la bonne solution est d'utiliser la méthode break-before ou break-after de la propriété:

    Une pause est forcé où le CSS2.1
    page-break-before/page-break-after [CSS21] ou le CSS3
    break-before/pause-après [CSS3-PAUSE] propriétés de spécifier un
    la fragmentation pause.

    Au moment de la rédaction, la plupart des navigateurs de mettre en œuvre la *-break-* propriétés de manière incorrecte ou ne pas les mettre en œuvre à tous. Considérer cette réponse en avance sur son temps.

    La démonstration suivante œuvres:

    • FF33

    CSS:

    .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 */
}

    HTML:

    <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>

    Chrome Version 73.0.3683.75

    Ne respecte pas le saut de colonne:

    Comment faire pour démarrer une nouvelle colonne dans flex colonne envelopper de mise en page

    InformationsquelleAutor Salman A
  2. 1

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

    "break-before’, ‘break-after’, ‘break-inside’

    En particulier:

    Nous pouvons mettre en break-before: column; sur chaque "tête" de l'élément, où la colonne valeur signifie:

    Toujours forcer un saut de colonne avant l'généré.

    (même si nous avons été à l'aide de pause-après:colonne ce serait forcer un saut de colonne après l'généré )

    NB: prise en charge du Navigateur est actuellement limitée à IE (!!)

    VIOLON (IE Uniquement)

    Noter que dans le au-dessus de violon pour IE il semble y avoir un problème de positionnement (bug?) j'ai donc mis un peu de code dans un support spécial requête que seuls les effets IE afin de ne pas affecter d'autres navigateurs

    • C'est un pas dans la bonne direction. Le code fonctionne dans chrome avec -webkit-column-break-before tandis que dans IE, il fonctionne de façon irrégulière, en fonction de la hauteur des éléments de la colonne.
    InformationsquelleAutor Danield