Envolver luchando

La batalla de rap (o rap de batalla ) es un tipo de actuación de rap en la que dos o más raperos cantan uno contra el otro (generalmente incluyendo algunos insultos/ataques). El cómic de hoy juega con los homófonos Rap y Wrap para hacer una broma tonta con Flexbox y la flex-wrappropiedad .

Un contenedor flexible distribuirá el contenido en una sola línea de forma predeterminada. Esto puede estar bien, pero si el tamaño de los artículos excede el contenedor, se apretarán o se desbordarán. Entonces, en su lugar, es posible que deseemos obtener el contenido en varias líneas. Aquí es donde flex-wrapentra en acción.

Esta propiedad define si un contenedor flexible será de una sola línea o de varias líneas (según la cantidad y el tamaño de los artículos flexibles) y, en el caso de varias líneas, define cómo se apilarán los artículos después de envolverlos.

flex-wraptiene tres valores principales:

• nowrap: los artículos no se envolverán; en su lugar, ajustarán su tamaño o desbordarán al padre. (Este es el valor predeterminado.)
• wrap: los artículos se envolverán en lugar de desbordar el contenedor flexible. Se apilarán desde el inicio cruzado hasta el final cruzado.
• wrap-reverse: los artículos se envolverán en lugar de desbordar el contenedor flexible. Se apilarán desde el extremo cruzado hasta el comienzo cruzado.

Veamos un ejemplo con un contenedor flexible con 5 elementos con un ancho definido. De forma predeterminada, el valor de flex-wrapes "nowrap", por lo que los elementos flexibles desbordarán el contenedor (lo puse como una imagen para evitar el molesto desbordamiento horizontal que crearía):

Ahora, si cambiamos el código para establecer un valor de "envoltura" para flex-wrap, cuando los elementos flexibles desbordarían el contenedor, se envolverían en una nueva fila en su lugar (demostración en vivo):

Pero si configuramos flex-wrap"wrap-reverse", entonces la dirección de la envoltura es la opuesta: en lugar de entrar en una nueva fila, los elementos envueltos empujan a los demás a una nueva fila.

Un último ejemplo con el flex-directionconjunto a "columna". En este caso, los elementos se organizan verticalmente en columnas, por lo que cuando se envuelven, lo hacen en columnas en lugar de filas:

Espero que estos ejemplos te hayan sido de utilidad y que hayas disfrutado el cómic de hoy . Obtenga más información sobre flex-wraplas siguientes fuentes:

• Artículo de MDN sobre envoltura flexible
• Trucos CSS: una guía completa de Flexbox
• Josh W Comeau: una guía interactiva de Flexbox