Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

Mampostería CSS con flexbox,: nth-child () y order

n la superficie, parece bastante fácil crear un diseño de mampostería con flexbox ; todo lo que tiene que hacer es configurar flex-flowcolumn wrapy listo, tener un diseño de mampostería. Algo así como. El problema con este enfoque es que produce una cuadrícula con un orden aparentemente barajado y oscuro. Los elementos se mostrarán (sin que el usuario lo sepa) de arriba a abajo y alguien que analice la cuadrícula de izquierda a derecha leerá los cuadros en un orden algo arbitrario, por ejemplo 1, 3, 6, 2, 4, 7, 8, 5 , y así sucesivamente.
Flexbox no tiene una manera fácil de representar elementos con un columndiseño mientras se usa un rowpedido, pero podemos construir un diseño de mampostería solo con CSS, sin necesidad de JavaScript, mediante el uso :nth-child()y la orderpropiedad. En resumen, aquí está el truco para crear un rowpedido mientras se usa flex-direction: column, dado que está renderizando tres columnas:
/* Render items as columns */
.container {
  display: flex;
  flex-flow: column wrap;
}

/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
Esto creará un diseño de mampostería con elementos representados como columnas pero ordenados como filas (las líneas verticales grises representan los pseudo elementos que fuerzan los saltos de línea :
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
Analicemos el problema (o saltemos a la solución , o veamos la colección de codepen ).

Elija su veneno: un orden aleatorio o brechas extrañashttps://tobiasahlin.com/blog/masonry-with-css/#pick-your-poison-a-shuffled-order-or-weird-gaps

Flexbox no es realmente construido para mampostería si se establece una altura fija en un contenedor de flexión (de modo que los artículos pueden envolver al desbordarse) y flex-flowque column wrap, logrará algo como esto:
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
Los elementos se representan en columnas de arriba a abajo, produciendo un orden arbitrario cuando se leen de izquierda a derecha. Por supuesto, este es el resultado esperado y deseable en muchos escenarios, pero no cuando estamos tratando de crear un diseño de mampostería, y se vuelve cada vez más desorientador a medida que la página crece.
Si, en cambio, cambiamos flex-directionrowy tenemos elementos de diferentes alturas, lograremos el orden correcto pero con brechas extrañas e inesperadas en toda nuestra cuadrícula:
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
Por lo tanto, parece imposible obtener lo mejor de ambos mundos: elementos representados como columnas pero ordenados como filas. Puede decidir usar flex-direction: columny simplemente moverse alrededor de los elementos en su HTML para lograr el orden visual correcto , pero esto puede ser engorroso, es innecesariamente complejo y desordenará el orden de tabulación de los elementos.

Reordenar elementos con ordernth-child()https://tobiasahlin.com/blog/masonry-with-css/#re-ordering-elements-with-order-and-nth-child

La orderpropiedad afecta el orden de los elementos contenidos en una cuadrícula o caja flexible CSS, y podemos usarla para reordenar elementos para nuestro diseño de mampostería que pronto será. La orderpropiedad es bastante sencilla de usar: si tiene dos elementos y uno tiene order: 1y el otro tiene order: 2el elemento con order: 1se representará antes que el otro elemento, independientemente de su orden de código fuente HTML.
La solución de mampostería CSS depende de un detalle de la orderespecificación: ¿qué sucede si dos o más elementos tienen el mismo ordervalor? ¿Qué viene primero? Flexbox recurre al orden del código fuente: el elemento que aparece primero en el código fuente se representará antes que otros elementos con el mismo valor de orden. Este hecho nos da la posibilidad de reagrupar fácilmente los elementos en nuestra cuadrícula para que podamos cambiar el orden de las columnas a las filas, sin dejar de representar esas filas como columnas nth-child().
Mira la tabla de abajo. Para lograr un orden razonable usando flex-direction: rowsolo tendremos que representar elementos en el orden predeterminado: 1, 2, 3, 4, 5, 6etc.
 Columna 1Columna 2Columna 3
Fila 1123
Fila 24 45 56 6
Fila 37 789 9
Fila 4101112
Si queremos lograr el mismo orden durante el uso, flex-direction: columndebemos cambiar el orden de los elementos para que coincida con el orden de cada columna de la tabla (en lugar de cada fila):
 Columna 1Columna 2Columna 3
Fila 1123
Fila 24 45 56 6
Fila 37 789 9
Fila 4101112
Es decir, los primeros elementos en nuestro diseño de flexbox tienen que ser 1, 4, 7, 10Estos elementos llenarán la primera columna, seguida 2, 5, 8, 11de la segunda columna y 3, 6, 9, 12de la tercera y última columna. Aquí es donde nth-child()entra el selector. Podemos usarlo para seleccionar cada tercer elemento (3n), comenzando con el primer elemento (3n + 1), y configurar todos esos elementos para que tengan el mismo ordervalor:
.item:nth-child(3n+1) { order: 1; }
Este selector establece el order: 1elemento 1, 4, 7, 10en nuestro contenedor, es decir, toda la primera columna. En otras palabras, estamos utilizando una combinación de nth-child()orderpara reordenar artículos según su orden original. Para crear la segunda y tercera columna, solo cambiamos el desplazamiento:
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }
Aquí estamos produciendo tres conjuntos: 1, 4, 7, 10(3n + 1) con order: 12, 5, 8, 11(3n + 2) con order: 23, 6, 9, 12(3n) con order: 3Todos juntos se hace el orden 1, 4, 7, 10, 2, 5, 8, 11, 3, 6, 9, 12.
Si nos aseguramos de representar cada uno de esos grupos como una columna (y no más), creará la ilusión de que los elementos han vuelto a su orden original cuando lees de izquierda a derecha. Si analizamos visualmente la cuadrícula como filas, la primera fila contendrá el primer elemento de cada grupo ( 1, 2, 3), la segunda fila contendrá el segundo elemento de cada grupo ( 4, 5, 6), y así sucesivamente. Con esta técnica podemos crear un diseño de mampostería con elementos representados como columnas pero ordenados como filas.
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
¿Cómo se ve afectado el orden de tabulación al barajar elementos como este? Por suerte, no del todo. ordersolo cambia la representación visual de los objetos, no el orden de tabulación, por lo que tabular a través de la cuadrícula funcionará según lo previsto.

Evitar que las columnas se fusionenhttps://tobiasahlin.com/blog/masonry-with-css/#preventing-columns-from-merging

Si tiene muchos elementos en un diseño de mampostería, esta técnica seguramente se descompondrá en algún momento. Contamos con que cada "grupo" que hemos creado se representará exactamente como una columna, pero en realidad los elementos pueden tener diferentes alturas y las columnas pueden comenzar a fusionarse fácilmente. La primera columna podría ser más larga que las otras dos, por ejemplo, lo que podría hacer que la tercera columna comience al final de la segunda columna:
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
El cuadro resaltado aquí (3) debe representarse al comienzo de la tercera columna o el algoritmo de ordenamiento se romperá, pero si hay espacio para otro elemento al final de la segunda columna, naturalmente se representará allí.
Podemos solucionar este problema de ajuste forzando a las columnas a reiniciarse en ciertos puntos. No hay una manera fácil de decir "este elemento debe saltarse la línea" con flexbox, pero podemos lograr este efecto agregando elementos invisibles que ocupen el 100% de la altura del contenedor . Como requieren que se represente el 100% de la altura del padre, no encajarán en una columna junto con ningún otro elemento, por lo que esencialmente forzarán saltos de línea al crear columnas contraídas.
Tenemos que insertar estos elementos de salto de línea en nuestra red y matriz de elementos, por lo que lo que estamos buscando es para crear esta secuencia de elementos: 1, 4, 7, 10, <break>, 2, 5, 8, 11, <break>, 3, 6, 9, 12Podemos utilizar pseudo-elementos en el contenedor para agregar estos, y podemos establecer el orderque 2en dos de ellos. Agregar un pseudo-elemento con :beforelo convertirá en el primer hijo del contenedor y agregar un pseudo-elemento con :afterlo convertirá en el último hijo del contenedor, por lo que si los configuramos order: 2en ambos se convertirán en el primer y el último elemento de el order: 2“grupo” (tal y como aparecen antes y después de los otros elementos): :before, 2, 5, 8, 11, :after.
/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
He resaltado los pseudoelementos a continuación para mostrar su efecto. Tenga en cuenta que a pesar de que el cuadro 3 cabría en la segunda columna, se representa como el primer elemento en la última columna:
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10

La soluciónhttps://tobiasahlin.com/blog/masonry-with-css/#the-solution

Como paso final, debe asegurarse de que su contenedor flexible tenga una altura establecida que lo haga más alto que su columna más alta (para que quepan todas las columnas). En conjunto, esto producirá un diseño de mampostería CSS con tres columnas ( también disponible como codepen ):
.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 600px; 
}

.item {
  width: 32%;
  margin-bottom: 2%; /* Optional */
}

/* Re-order items into 3 rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
Su HTML debería verse así, con uno <div />para cada elemento en su cuadrícula:
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

Trabajando con más de tres columnashttps://tobiasahlin.com/blog/masonry-with-css/#working-with-more-than-three-columns

Para crear un diseño de mampostería con más de tres columnas, necesitamos hacer algunas cosas: adaptar nuestro algoritmo de clasificación, actualizar el ancho de los elementos e insertar elementos de salto de línea manualmente (en lugar de usar pseudoelementos). Para acceder rápidamente al resultado final, he compilado una lista de codepens que muestran la mampostería flexbox con 3, 4, 5 y 6 columnas .
Dado que estamos limitados a crear solo dos pseudoelementos con :before:afterdebemos recurrir a agregar manualmente elementos de ruptura en nuestro contenedor (necesita un elemento de ruptura menos que el número de columnas en su diseño). Simplemente puede agregarlos al final de su contenedor, se ordenarán en sus respectivas columnas:
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>
Estamos insertando saltos de columna como spans para ordenarlos independientemente de los elementos de contenido. Necesitamos una forma de "reiniciar" el recuento una vez que alcanzamos los elementos de interrupción, o un número desigual de elementos de contenido podría hacer que el primer elemento de interrupción comience después de la tercera columna, por ejemplo. El :nth-of-typeselector se dirige a elementos de diferentes tipos de forma independiente, por lo que podemos desacoplar el orden de los elementos de contenido y la columna se divide así:
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }
Los elementos de ruptura, como anteriormente, ocupan toda la altura del contenedor:
/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  margin: 0;
}
Esto creará un diseño de mampostería con cuatro columnas ( ver código abierto ):
1
2
3
4 4
5 5
6 6
7 7
8
9 9
10
11
12
Aquí está la solución completa para un diseño de mampostería CSS con cuatro columnas:
.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 600px; 
}

.item {
  width:24%;
  margin-bottom: 2%; /* Optional */
}

/* Re-order items into 4 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  margin: 0;
}
Esta forma exclusiva de CSS de crear un diseño de mampostería (o mosaico) seguramente no es tan robusta, flexible e infalible como una implementación de JavaScript (como Masonry ), pero si no desea confiar en una biblioteca de terceros solo para crear un diseño de mampostería Espero que estos trucos de diseño puedan ser útiles.
Para obtener ayuda con patrones de flexbox CSS más comunes, he compilado una lista de ejemplos de flexbox que puede copiar y pegar en sus proyectos y escrito en profundidad sobre la técnica de elemento de flexbox de salto de línea .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas