Cómo usar Flex para hacer que su sitio web sea más receptivo

Los diseños de sitios web modernos deben responder a los cambios en el contenido o al tamaño del navegador. Puede lograr esto usando CSS estándar, consultas de medios o flexbox.

Ciertas propiedades flexibles, como flex-wrap o flex-grow, pueden cambiar el tamaño o la ubicación de un elemento de una manera visualmente atractiva. Este artículo analizará ejemplos de cómo puede usar las propiedades flex-grow, flex-shrink, flex-wrap, flex-flow y order flex.

Cómo configurar la visualización flexible de CSS

Si no estás familiarizado con los fundamentos de flexbox, puedes explorar esto Fragmento de CodePen. Incluye código de ejemplo para una configuración simple de flexbox. Primero, deberá envolver los elementos secundarios en un div principal o "contenedor flexible".

<clase div="padre">
<clase div="artículo secundario"></div>
<clase div="artículo secundario"></div>
<clase div="artículo secundario"></div>
</div>

Añade el pantalla: flexionar propiedad a la división principal.

.padre {
 pantalla: flexible;
}

Cómo hacer crecer artículos dentro de un contenedor

Él crecimiento flexible La propiedad permite que los elementos secundarios se expandan para llenar el espacio disponible en su div principal. Esta propiedad le permite especificar la cantidad de espacio de "proporción" que puede ocupar cada elemento de la caja.

Para agregar flex-grow, agregue la propiedad CSS flex-grow a cada uno de los elementos secundarios.

<clase div="padre">
<estilo div="color de fondo: rojo; crecimiento flexible: 1"></div>
<estilo div="color de fondo: naranja; crecimiento flexible: 1"></div>
<estilo div="color de fondo: amarillo; crecimiento flexible: 1"></div>
<estilo div="color de fondo: verde; crecimiento flexible: 3"></div>
<estilo div="color de fondo: azul; crecimiento flexible: 1"></div>
</div>

.padre {
 ancho: 500px;
 pantalla: flexible; 
}

Un crecimiento flexible de 0 para cada elemento significa que las cajas no se expandirán para llenar el espacio de su padre. 0 es el valor predeterminado para esta propiedad.

Un crecimiento flexible de 1 para cada elemento obligará a todas las cajas a expandirse por igual para adaptarse al espacio disponible dentro del padre.

Si uno de los artículos tuviera un mayor crecimiento de flexión, por ejemplo:

<estilo div="color de fondo: verde; crecimiento flexible: 3"></div>

La caja verde intentará ganar hasta tres veces más espacio que las otras cajas.

Vea el código de la propiedad flex-grow en este Fragmento de CodePen para ver un ejemplo de trabajo.

Cómo encoger artículos dentro de un contenedor

En algunos casos, el ancho del padre puede reducirse y los elementos dentro del padre ya no caben dentro. Puedes usar el flexión-encogimiento propiedad de reducir el tamaño de las cajas. De esta manera, pueden permanecer contenidos dentro del padre.

Flex-shrink le permite especificar una proporción de cuánto debe encoger cada elemento.

Agregue la propiedad flex-shrink a los elementos div secundarios. Cambie los anchos de los elementos principales y secundarios para que los elementos no quepan en el contenedor.

<clase div="padre">
<estilo div="color de fondo: rojo; contracción flexible: 1"></div>
<estilo div="color de fondo: naranja; contracción flexible: 1"></div>
<estilo div="color de fondo: amarillo; contracción flexible: 1"></div>
<estilo div="color de fondo: verde; contracción flexible: 2"></div>
<estilo div="color de fondo: azul; contracción flexible: 1"></div>
</div>

.padre {
 ancho: 500px;
 pantalla: flexible; 
}
.padre división {
 ancho: 150px;
 altura: 150px;
}

Una contracción flexible de 1 para todos los elementos significa que todos los elementos se reducirán por igual si se reduce el ancho del padre.

Si uno de los artículos tuviera una mayor contracción por flexión, por ejemplo:

<estilo div="color de fondo: verde; contracción flexible: 2"></div>

La caja verde intentará encogerse el doble que las otras cajas.

Vea el código de la propiedad flex-shrink en este Fragmento de CodePen para ver un ejemplo de trabajo.

Cómo empujar elementos a la siguiente fila

Él envoltura flexible La propiedad le permite empujar elementos a la siguiente línea si no caben dentro del ancho del contenedor principal. Aquí, los elementos no se encogen y podrá conservar la altura y el ancho de los elementos.

Las opciones para la propiedad flex-wrap incluyen:

envoltura flexible: nowrap | envolver | envolver-reversa

Agregue la propiedad flex-wrap al contenedor flexible principal. Asegúrese de que el ancho del contenedor sea lo suficientemente pequeño, para que no quepan los elementos secundarios dentro de él. Esto forzará cualquier elemento desbordado en una nueva fila.

<clase div="padre">
<clase div="rojo"></div>
<clase div="naranja"></div>
<clase div="amarillo"></div>
<clase div="verde"></div>
<clase div="azul"></div>
</div>

.padre {
 ancho: 300px;
 borde: 1px negro sólido;
 pantalla: flexible;
 envoltura flexible: envoltura;
}
.padre división {
 ancho: 100px;
 altura: 100px;
}

El valor de ajuste posicionará los elementos comenzando en la parte superior derecha del contenedor. El valor wrap-reverse cambiará la posición de los elementos para comenzar en la parte inferior derecha del contenedor. Al envolver los artículos, empujará los artículos en una nueva fila arriba en lugar de abajo.

Si especifica una altura en el contenedor principal, el contenedor agregará espacio entre las filas de elementos.

Si desea eliminar este espaciado, pero mantener la altura del div principal, use la propiedad align-content. Especifique la propiedad de alineación de contenido como "inicio flexible" en el div principal:

.padre { 
 ancho: 300px; 
 altura: 300px;
 borde: 1px negro sólido; 
 pantalla: flexible;
 envoltura flexible: envoltura; 
 alinear-contenido: flex-comienzo;
}

La propiedad align-content es una de varias propiedades de flexbox que le permiten controlar la alineación.

Vea el código de la propiedad flex-wrap en este Fragmento de CodePen para ver algunos ejemplos.

Cómo empujar elementos a la siguiente columna

Si está utilizando un diseño diferente (como una columna) y aún necesita los elementos para envolver, puede usar el flujo flexible propiedad. Esta propiedad de flexión es una combinación de las propiedades de envoltura flexible y dirección flexible.

Las combinaciones de opciones de ejemplo que puede usar para la propiedad de flujo flexible incluyen:

envoltura flexible: fila nowrap | resumen de la columna | envoltura de fila | envoltura de columna | reverso de fila | ajuste de columna-reverso

Esta propiedad funciona de manera similar a la propiedad flex-wrap anterior. Agregue flujo flexible al contenedor flexible principal. Asegúrese de que el ancho del contenedor principal sea lo suficientemente pequeño como para obligar a los elementos secundarios a envolverse:

.padre {
 ancho: 300px; 
 borde: 1px negro sólido; 
 pantalla: flexible; 
 flujo flexible: envoltura de columna;
}
.padre división {
 ancho: 100px;
 altura: 100px;
}

Los elementos se ajustarán en la dirección especificada (fila o columna).

Vea el código de la propiedad de flujo flexible en este Fragmento de CodePen para ver algunos ejemplos.

Cómo cambiar el orden de los artículos

Si necesita reorganizar los elementos de la página debido a algún tipo de datos dinámicos, puede utilizar el pedido propiedad de flexión. Esta propiedad le permite especificar el orden en que aparece cada elemento.

Los números no necesariamente tienen que comenzar desde 1. Puede usar cualquier número e intervalo, y la propiedad order ordenará los elementos HTML de menor a mayor.

Agregue la propiedad order a cada uno de los elementos dentro del contenedor flexible principal:

<clase div="padre">
<clase div="rojo" estilo="orden: 2"></div>
<clase div="naranja" estilo="pedido: 1"></div>
<clase div="amarillo" estilo="orden: 5"></div>
<clase div="verde" estilo="orden: 4"></div>
<clase div="azul" estilo="orden: 3"></div>
</div>

En este caso, el cuadro naranja estará en el extremo derecho, seguido de los cuadros rojo, azul, verde y luego amarillo.

Ver el código de la propiedad de la orden en este Fragmento de CodePen para ver algunos ejemplos.

Experimentando con más propiedades CSS en su sitio web

Puede usar estas propiedades flexibles para hacer que su sitio web sea más receptivo. Esto incluye el uso de las propiedades flex-grow, flex-shrink, flex-wrap, flex-flow y order flex.

También puede conocer más propiedades flexibles para ayudarlo a alinear los elementos HTML en su sitio web.

Cómo usar Flex para alinear elementos HTML

Leer siguiente

Sobre el Autor