So starten Sie eine neue Spalte in flex Spalte wrap-layout

Ich möchte, dass meine Daten in Spalten angeordnet sind (von oben nach unten, von Links nach rechts) und jede Position innerhalb der Daten beginnen soll eine neue Spalte. Es gibt drei Einschränkungen:

  • Verwenden müssen, flex (ich brauchen, um eine spezielle Funktion für die flex)
  • Nicht gruppieren der Daten (z.B. wickeln Sie alle Daten-items in einem div)
  • Keine Feste Höhe

Meine Frage ist, wie kann ich Kraft ein Spaltenumbruch innerhalb einer flex-flow: column wrap-layout?

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>

  • Dies wird wahrscheinlich nicht passen Ihre Bedürfnisse, aber ich habe dieses mit der Standard-Reihe von Richtung und leeren divs... es ist ein bisschen schmutzig.
  • Wären Sie daran interessiert, eine Lösung, die über column-count? Flex-und column-count nicht gut zusammen spielen, aber vielleicht, wenn flex angewendet wird, auf ein übergeordnetes element, die Sie vielleicht in der Lage sein, Sie beide zu verwenden
  • Das wird nicht für mich arbeiten, aber es könnte helfen, jemand anderes mit ähnlichen problem.
InformationsquelleAutor Salman A | 2014-11-25
  1. 9

    Offenbar die richtige Lösung ist die Verwendung der break-before oder break-after Eigenschaft:

    Einer Pause gezwungen ist, überall dort, wo die CSS2.1
    page-break-before/page-break-after [CSS21] oder die CSS3
    break-before/Pause-nach [CSS3-PAUSE] - Eigenschaften angeben
    Fragmentierung brechen.

    In der Zeit des Schreibens, die meisten Browser implementieren die *-break-* Eigenschaften falsch oder nicht implementiert werden. Betrachten Sie diese Antwort seiner Zeit Voraus.

    Folgende demo arbeitet in:

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

    Chrom Version 73.0.3683.75

    Nicht respektieren die Spalte break:

    So starten Sie eine neue Spalte in flex Spalte wrap-layout

    InformationsquelleAutor Salman A
  2. 1

    Ich glaube nicht, dass es einen Weg gibt, dies zu tun mit flexbox, aber wenn wir column-count wir können den Vorteil der Eigenschaften:

    'Pause-before', 'Pause-after', 'break-inside'

    Insbesondere:

    Können wir break-before: column; auf jeden 'Kopf' - element, wo die Spalte Wert bedeutet:

    Immer Kraft einen Spaltenumbruch vor der generierten box.

    (ähnlich wie wenn wir mit Pause-nach:Spalte diese zwingen würde, eine Spalte Pause nach der generierten box )

    NB: Browser-Unterstützung ist derzeit beschränkt auf den IE (!!)

    FIDDLE (Nur IE)

    Beachten Sie, dass in der oben fiddle für den IE scheint es eine Positionierung-Problem (bug?) so legte ich einige code in einem speziellen Medien-Abfrage, die nur Effekte, die der IE so nicht zu Wirkung anderen Browsern

    • Das ist ein Schritt in die richtige Richtung. Der code funktioniert in chrome mit -webkit-column-break-before während im IE funktioniert es uneinheitlich, je nach der Höhe der Spalte Elemente.
    InformationsquelleAutor Danield
  3. 0

    Wenn Sie können dynamisch hinzufügen ein div vor jeder Kopf (außer der ersten), kann es möglich sein. Credits gehen an Tobias Bjerrome Ahlin. Getestet auf Chrome, Firefox, Safari und IE11.

    CSS:

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

    HTML:

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

    InformationsquelleAutor Moussa
Schreibe einen Kommentar