Cómo usar Flexbox para crear un diseño de tarjeta CSS moderno

Gracias a Flexbox, un nuevo modo de diseño en CSS3, podemos colocar todas nuestras tarjetas en una fila, literalmente. Los diseños de tarjetas han ganado popularidad en los últimos años; como probablemente habrás notado, los sitios de redes sociales realmente han adoptado las tarjetas. Pinterest y Dribbble usan diseños de tarjetas para mostrar información y elementos visuales. Y si te gusta Material Design, las tarjetas de Google están bien descritas en su biblioteca de patrones.

Personalmente, me gustan los diseños de tarjetas por su legibilidad y por lo desplazables que son. Presentan la "ráfaga" perfecta de información de una manera que es fácil de navegar, desplazar y escanear todo a la vez.

Cómo crear un diseño de tarjeta

Si alguna vez ha intentado filas de contenido de altura uniforme, sabe que crearlas no siempre ha sido fácil. Probablemente haya tenido que hacer un poco de manipulación para que funcione en el pasado. Gracias a Flexbox, esos días han quedado atrás. Según el nivel de soporte del navegador que necesite proporcionar, es posible que deba incluir algunos recursos alternativos, pero el soporte del navegador para esta función es bastante confiable en estos días. Para estar seguro, asegúrese de revisar Flexbox en el confiable Can I use. Y recuerda, nunca debes hacer cambios en tu sitio en vivo. Intente experimentar con Local en su lugar, una aplicación de desarrollo de WordPress local gratuita.

La idea básica de Flexbox es que puede establecer la propiedad de visualización de un contenedor en flex , lo que "flexionará" el tamaño de todos los contenedores dentro de él. Las columnas de igual altura y las opciones de escalado y contracción simplificarán la forma en que se pueden crear diseños avanzados. Comenzar con tarjetas es como una hoja de trucos de Flexbox, pero una vez que dominas los conceptos básicos, puedes crear diseños más complejos.

Flexbox y versatilidad

Las tarjetas son versátiles, visualmente atractivas y es fácil interactuar con ellas tanto en dispositivos grandes como pequeños, lo cual es perfecto para un diseño receptivo. Cada tarjeta actúa como un contenedor de contenido que se amplía o reduce fácilmente. A medida que el tamaño de la pantalla se vuelve más pequeño, el número de cartas en la fila generalmente disminuye y comienzan a apilarse verticalmente. Existe una flexibilidad adicional ya que pueden ser de altura fija o variable.

Cómo crear el diseño

Crearemos un diseño de tarjeta Flexbox que tenga una fila de cuatro contenedores horizontales en pantallas más grandes, dos en medianas y una sola columna para dispositivos pequeños.

A continuación se muestra el fragmento de código para crear un diseño básico para mostrar cuatro tarjetas. No incluyo el contenido de la tarjeta interna (ya que es demasiado largo en los ejemplos de código), así que asegúrese de incluir contenido inicial (y haga que la cantidad de contenido varíe entre las cuatro tarjetas). Además, aquí se muestra una fila de cuatro tarjetas para comenzar, pero se pueden agregar más si desea ver el comportamiento con varias filas de contenido. Todo el código se puede encontrar en Codepen.

Para mostrar nuestro diseño de diseño en un patrón de cuadrícula, debemos comenzar por el exterior y avanzar hacia adentro. Es importante asegurarse de hacer referencia al contenedor correcto, de lo contrario, las cosas se complicarán un poco.

La sección con una clase de .cards es a lo que apuntaremos primero. La propiedad de visualización del contenedor es lo que necesitamos cambiar a flex .

Aquí está el código HTML con el que querrás empezar:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Aquí está el CSS para empezar:

.cards {
   display: flex;
   justify-content: space-between;
}

Propiedad de flexión

Antes de profundizar demasiado, es bueno conocer los conceptos básicos de la propiedad flex. La propiedad flex especifica la longitud del elemento, en relación con el resto de los elementos flexibles dentro del mismo contenedor. La propiedad flex es una abreviatura de las propiedades flex-grow , flex-shrink y flex-basis . El valor predeterminado es 0 1 auto; . En mi opinión, la mejor manera de entender completamente Flexbox es jugar con los diferentes valores y ver qué sucede.

La propiedad flex-grow de un elemento flexible especifica qué cantidad de espacio dentro del contenedor flexible debe ocupar el elemento.

La propiedad flex-shrink especifica cómo se encogerá el artículo en relación con el resto de los artículos flexibles dentro del mismo contenedor.

La propiedad flex-basis especifica el tamaño principal inicial de un elemento flexible. Esta propiedad determina el tamaño del cuadro de contenido, a menos que se especifique lo contrario usando el tamaño del cuadro. Auto es el valor predeterminado cuando el contenido define el ancho, que es similar al width: auto; . Ocupará un espacio definido por su propio contenido. Puede haber un valor específico que permanezca verdadero como se ve en la flex-basis: 15em; . Si el valor es 0, las cosas están bien establecidas porque el elemento no se expandirá para llenar el espacio libre.

Empezamos con display: flex; y justify-content: space-between; y en este punto, las cosas son un poco impredecibles. Se está utilizando Flexbox, aunque no es muy obvio en este momento. Con esta declaración, cada uno de los elementos flexibles se ha colocado uno al lado del otro en una fila horizontal.

Ver esto en Codepen.

Probablemente se esté preguntando por qué cada uno de estos elementos flexibles tiene un ancho diferente. Flexbox está tratando de averiguar cuál es el ancho predeterminado más pequeño para cada uno de estos elementos. Y debido a las diversas longitudes de palabra y otros elementos de diseño, terminas con estas cajas de diferentes tamaños. Para lograr una apariencia consistente, tendremos que hacer un poco más de trabajo. Establecer una envoltura y determinar el ancho deseado ayudará a convertirlas en tarjetas uniformes.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

De forma predeterminada, todos los elementos flexibles intentarán encajar en una línea. Añadiendo el flex-wrap: wrap; hace que los elementos se envuelvan uno debajo del otro porque el valor predeterminado es ancho completo.

Ver esto en Codepen.

El ancho completo es excelente para dispositivos pequeños, así que tengamos esto en cuenta cuando planeemos nuestra pantalla más grande antes de abordar varios puntos de interrupción. Cuando cambiamos el ancho, las tarjetas comienzan a verse más uniformes.

Necesitamos agregar la clase .card ahora para diseñar nuestras tarjetas individuales. Esto puede ir justo debajo de los estilos .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Recuerde que antes, la propiedad flex es abreviada: flex-grow es 0, flex-shrink es 1 y el width es 24%. Al agregar un ancho específico, esto nos da una fila de cuatro con algo de espacio entre ellos.

Ver esto en Codepen.

Establecemos la propiedad de justify-content con fines de espaciado. El primer elemento se muestra totalmente a la izquierda, el segundo y el tercero se muestran en el medio y el cuarto elemento se muestra totalmente a la derecha. Debido a que el ancho de la tarjeta es del 24 %, queda algo de espacio ya que nuestras cuatro columnas al 24 % no suman el 100 %. Nos queda un 4% para ser exactos. Este 4% se coloca a partes iguales entre cada uno de los artículos. Entonces tenemos aproximadamente 1.33% de espacio entre las tarjetas.

Ver esto en Codepen.

También podemos ser más precisos usando calc . Cambiar el valor flex-basis para usar calc se vería así:

.card {
	flex: 0 1 calc(25% - 1em);
}

Lo bueno de esto es que el navegador tomará el 25% del espacio y eliminará 1 em, lo que hace que las tarjetas sean un poco más pequeñas.

Es una forma ingeniosa de ajustar el espacio disponible. El 1em se distribuye uniformemente entre los elementos y terminamos con el diseño perfecto.

Hasta ahora, realmente no hemos hablado mucho sobre la altura. Agregué otra fila de tarjetas para demostrar cómo funciona la altura. Depende de qué tarjeta tenga más contenido: la altura de las demás seguirá. Por lo tanto, cada fila de contenido tendrá la misma altura.

Esta es una vista muy "reducida", pero notará que la primera fila es bastante alta porque la segunda tarjeta tiene más texto que las otras en esa fila. La segunda fila tiene menos texto, por lo que en general es más corta.

Tarjetas para dispositivos más pequeños

Actualmente tenemos cuatro columnas en todas las pantallas, lo que no es realmente una buena práctica. Si reduce la ventana de su navegador, verá que las cuatro tarjetas se aplastan más en pantallas más pequeñas, lo que no es ideal para la legibilidad. Afortunadamente, con las consultas de los medios, las cosas comenzarán a verse mucho mejor.

Para comenzar a resolver el problema, los puntos de interrupción especificados garantizarán que el contenido se muestre correctamente en todos los diferentes tipos de pantalla.

Estos son los siguientes puntos de interrupción que se utilizarán (siéntase libre de usar el suyo también, los conceptos aún se aplican):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

Ha sido un gran pensamiento hasta ahora. Entremos en la mentalidad de dar prioridad a los dispositivos móviles y comencemos con el min-width: 40em interrupción de 40 em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Con estos cambios, las tarjetas se mostrarán en el ancho de pantalla completa y se apilarán una debajo de la otra en cualquier pantalla de menos de 640 px de ancho. Si expande la ventana del navegador a algo por encima de eso, regresa la columna de cuatro. Esto tiene sentido porque hay un min-width mínimo de 40em y aquí es donde hemos creado la fila de cuatro cartas.

Lo que falta aquí es el término medio. Para el rango medio, tener dos cartas seguidas es más legible, en lugar de las cuatro cartas aplastadas. Antes de averiguar la fila de dos tarjetas, se debe agregar otra consulta de medios para acomodar las pantallas más grandes, que tendrán la fila de cuatro tarjetas.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

La nueva consulta de medios con un min-width mínimo de 60em es donde se declararán las cuatro cartas. El min-width mínimo de 40em es donde se declarará la fila de dos cartas. La magia está sucediendo con el valor de calc flexible de 50% - 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Con ese simple cambio, ¡las cosas ahora funcionan! Reduzca y expanda la ventana del navegador para asegurarse de que todo se vea correcto.

Ver esto en Codepen.

Si tus filas de cartas se ven bien, ¡entonces estás listo para comenzar! Si está probando este tutorial y tiene una última fila desigual, siga leyendo.

Contenido dinámico y espaciado de la última fila de tarjetas

Dependiendo de su número de tarjetas, puede o no tener una última fila tonta. Si hay una última fila completa o solo una carta extra, no habrá problema. A veces, tendrá su contenido planeado con anticipación, pero si el contenido es dinámico, es posible que la última fila de tarjetas no se comporte como esperaba. Si hay más de una tarjeta adicional y se establece el contenido justificado, el espacio entre ellas será uniforme y es posible que no se alinee con las filas anteriores.

Para obtener este aspecto, se requiere una forma diferente de pensar. Yo diría que esto no es tan eficiente, pero es relativamente simple.

El estilo de .cards y .card se realizó fuera de una consulta de medios:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Las consultas de medios son donde se determina el número de tarjetas:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Eche un vistazo a Codepen para ver la solución modificada.

Con suerte, esto le brinda una descripción general básica de los conceptos de Flexbox que lo ayudarán a comenzar. Flexbox tiene un soporte de navegador bastante bueno, y los diseños de tarjetas se seguirán utilizando en los diseños de sitios web. Y recuerde, los diseños de tarjetas son solo el comienzo de cómo puede utilizar Flexbox.

Siguiente: Diseñe sitios de WordPress más rápido

En esta guía, cubriremos consejos sobre cómo trabajar más rápido y acelerar su flujo de trabajo de WordPress. Desde la configuración inicial del sitio hasta su puesta en marcha, ¡descubra cómo puede reducir horas de trabajo de su trabajo diario!

¡Descarga la guía gratis aquí!

¿Qué más has construido usando Flexbox? ¡Comparte tus proyectos en los comentarios!