css - videos - Cómo iniciar una nueva columna en el diseño de ajuste de columna flexible

quiropraxia videos

Question

Quiero que mis datos se ordenen en columnas (de arriba a abajo, de izquierda a derecha) y cada encabezado dentro de los datos debe comenzar una nueva columna. Hay tres restricciones:

• Debo usar flex (necesito usar una característica específica para flexionar)
• No se pueden agrupar los datos (por ejemplo, envolver todos los elementos de datos dentro de un div)
• No se puede establecer una altura fija

Mi pregunta es ¿cómo puedo forzar un salto de columna dentro de un diseño de flex-flow: column ajuste de flex-flow: column ?

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

Answer 1

Aparentemente, la solución correcta es usar la propiedad break-before o break-after :

Se fuerza una ruptura dondequiera que las propiedades CSS2.1 page-break-before / page-break-after [CSS21] o CSS3 break-before / break-after [CSS3-BREAK] especifican una ruptura de fragmentación.

Al momento de escribir, la mayoría de los navegadores implementan las propiedades *-break-* incorrectamente o no las implementan en absoluto. Considera esta respuesta antes de tiempo.

La siguiente demo funciona en:

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

Answer 2

No creo que haya una manera de hacer esto con flexbox, sin embargo, si usamos column-count podemos aprovechar las propiedades:

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

En particular:

Podemos establecer break-before: column; en cada elemento ''cabeza'', donde el valor de la columna significa:

Forzar siempre un salto de columna antes de la caja generada.

(de manera similar, si estuviéramos usando la ruptura después de : columna, esto forzaría una ruptura de columna después de la caja generada)

NB: el soporte del navegador actualmente está limitado a IE (!!)

FIDDLE (IE solamente)

Tenga en cuenta que en el violín anterior para IE parece haber un problema de posicionamiento (¿error?), Por lo que coloqué un código en una consulta de medios especial que solo afecta a IE para que no afecte a otros navegadores