Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

Saltando a una nueva fila con flexbox

ste es el desafío: si desea crear un diseño de caja flexible con varias filas de elementos, ¿cómo controla qué elemento termina en qué fila? Suponga que desea crear un diseño similar a este, con tres elementos apilados y elementos alternos de ancho completo:
Una forma común de controlar el posicionamiento y el tamaño de los artículos flexibles es usar widthflex-basisSi establecemos que el cuarto elemento tenga un ancho del 100%, se colocará en su propia fila. Pero, ¿qué pasa si no queremos o no podemos establecer el ancho de los elementos individuales, realmente necesitamos? ¿O hay una manera de decirle a flexbox que salte la línea en ciertos puntos?
No hay ninguna propiedad que podamos establecer en un elemento flexible para que se rompa en una nueva fila, pero podemos insertar una fila contraída (puede pensarlo como a <br>) entre dos elementos flexibles, dos logran algo similar. En una esencia:
/* Inserting this collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.break {
  flex-basis: 100%;
  height: 0;
}
<div class="container">
  <div class="item"></div>
  <div class="break"></div> <!-- break -->
  <div class="item"></div>
</div>
Veamos algunos escenarios cuando desee usar esto, y veamos algunas técnicas de diseño interesantes que nos permiten usar.
Nótese que todos los ejemplos de código a continuación requiere y se supone que tiene un recipiente con flexión display: flexflex-wrap: wrapy que los elementos flexibles se añaden a ese contenedor:
.container {
  display: flex;
  flex-wrap: wrap;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

Insertar un elemento flexible que rompe líneashttps://tobiasahlin.com/blog/flexbox-break-to-new-row/#inserting-a-line-breaking-flex-item

El uso de un elemento para dividir en una nueva fila flexible tiene un efecto interesante: podemos omitir especificar el ancho de cualquier elemento en nuestro diseño flexible y confiar completamente en los saltos de línea para definir el flujo de nuestra cuadrícula.
Comencemos con un ejemplo simple. Digamos que tenemos dos elementos mostrados uno al lado del otro (estos están configurados para crecer flex-grow: 1y no tienen definido widthflex-basis):
Podemos insertar un elemento de salto de línea entre los elementos para que ambos ocupen el 100% del espacio disponible:
<div class="item">...</div>
<div class="break"></div> <!-- break to a new row -->
<div class="item">...</div>
Esto produce un diseño con dos elementos de ancho completo apilados verticalmente (he agregado un borde al .breakelemento para ilustrar su posición y comportamiento):
¿Como funciona esto? Como dijimos que .breakdebería ocupar el 100% del ancho del contenedor (porque lo configuramos flex-basis: 100%), el elemento flexible de ruptura debe ubicarse en su propia fila para lograrlo. No puede compartir una fila con el primer elemento, por lo que se dividirá en una nueva fila, lo que dejará el primer elemento solo en una fila. El primer elemento crecerá para llenar el espacio restante (desde que lo configuramos flex-grow: 1). La misma lógica se aplica al segundo elemento.
Podemos usar esta técnica para componer el diseño en la parte superior de la publicación separando antes y después de cada cuarto elemento:
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="break"></div> <!-- break -->
<div class="item">...</div>
<div class="break"></div> <!-- break -->
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
Esto producirá el diseño en la parte superior de la publicación del blog. Esencialmente, un elemento no se dividirá en una nueva fila a menos que insertemos el elemento de salto de línea:
Una vez más, no necesitamos especificar el ancho de ninguno de esos elementos. La misma técnica funcionará para las columnas si tenemos un contenedor flexible con flex-direction: column, y establecemos width(en lugar de height0para nuestro elemento de ruptura:
/* Use a collapsed column to break to a new column */
.break-column {
  flex-basis: 100%;
  width: 0;
}
Este enfoque de usar elementos de salto de línea para definir un diseño definitivamente agrega algo de hinchazón y ruido a nuestro HTML, pero puede ser una herramienta poderosa cuando se usa de la manera correcta. Podemos, por ejemplo, usarlo para construir un diseño de mampostería solo con CSS , y posicionar los saltos dinámicamente con la orderpropiedad. También podemos pasar a una nueva fila sin tener que modificar el ancho de ningún elemento de contenido, y podemos confiar únicamente en flex-growdistribuir el espacio en un diseño de cuadrícula.
Supongamos que estamos buscando crear este diseño:
Y suponga que queremos hacerlo estableciendo diferentes valores flex-growpara distribuir el espacio (en lugar de usar flex-basiswidth, que tendría que volver a calcular tan pronto como agregue o elimine elementos):
.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }
<div class="item"></div>
<div class="item-wide"></div>
<div class="item"></div>
Si luego queremos agregar otra fila de elementos debajo de esa fila:
No podríamos hacerlo sin recurrir a la configuración flex-basiswidthal menos en algunos de los elementos (o crear un diseño de caja flexible anidado con un elemento flexible para cada fila). Si todos los elementos solo tienen valores diferentes de flex-grownada, los haría saltar a una nueva fila, todos se juntarían en una fila:
Acogedor, pero no es lo que buscamos. Sin embargo, si insertamos un elemento de ruptura, podemos construir este diseño distribuyendo todo el espacio con flex-grow:
.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }
<div class="item"></div>
<div class="item-wide"></div>
<div class="item"></div>
<div class="break"></div> <!-- break -->
<div class="item"></div>
<div class="item"></div>
Produciendo el diseño deseado, con todos los tamaños definidos proporcionalmente a través de flex-grow:
Y si hay un escenario en el que necesitamos cinco elementos en la primera fila, no tenemos que cambiar ninguno de los CSS para que funcione, simplemente podemos agregar esos elementos antes del salto de línea:
<div class="item"></div>
<div class="item"></div>
<div class="item-wide"></div>
<div class="item"></div>
<div class="item"></div>
<div class="break"></div> <!-- break -->
<div class="item"></div>
<div class="item"></div>
Todo lo que necesita agregar a su CSS para usar elementos de salto de línea son estas dos clases (la única diferencia entre las dos clases es que width(y no height) necesita configurarse 0para que el elemento colapse cuando se usa en un diseño de columna) :
/* Inserting a collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.break {
  flex-basis: 100%;
  height: 0;
}

/* Use a collapsed column to break to a new column */
.break-column {
  flex-basis: 100%;
  width: 0;
}
Por supuesto que podría lograr el mismo efecto o efectos similares anidando flexboxes y que tiene un elemento de la flexión para cada fila, y en muchos casos simplemente utilizando flex-basiswidtho el contenido dentro de los elementos de flexión es probablemente la mejor forma de controlar el flujo de elementos de una diseño de flexbox. Pero insertar elementos flexibles de salto de línea es accesible y fácil de asimilar, funciona, y la técnica viene con algunas características únicas que pueden ser útiles.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas