Publicamos un curso en el canal de YouTube de freeCodeCamp.org en español que te enseñará Flexbox desde los fundamentos. Al final del curso, podrás diseñar e implementar diseños responsivos.

Este curso fue creado por Leosbel Poll Sotomayor. Leosbel es un ingeniero de software con más de 10 años de experiencia, que comenzó a crear hace 20 años en Cuba y ahora vive en Canadá gracias a sus habilidades de programación. Creó este curso para la comunidad freeCodeCamp.

¿Listos? Veamos una descripción general de Flexbox y lo que aprenderás durante el curso.

¿Qué es CSS Flexbox?

CSS Flexbox significa CSS Flexible Box Layout. Es un modelo de diseño que te permite reorganizar elementos responsivos dentro de un contenedor en base a propiedades CSS que definen cómo los descendientes deben "moverse" para ajustarse al tamaño de su contenedor.

Con Flexbox puedes alinear, distribuir y espaciar elementos usando propiedades sencillas para evitar cálculos complejos en tu CSS.

Durante el curso, aprenderás a utilizar las siguientes propiedades:

• flex-direction
• justify-content
• flex-wrap
• align-items
• align-content
• flex-grow
• flex-basis
• flex-shrink

¡Y más! También aprenderás a combinarlos con Media Queries en CSS para crear diseños responsivos aún más poderosos.

Oportunidades profesionales

Si tu objetivo es tener una carrera en el campo del desarrollo web, Flexbox te será de gran ayuda. Estas habilidades son altamente demandadas y buscadas por empleadores a nivel mundial.

Curso de Flexbox en español

Genial. Ahora que ya sabes por qué Flexbox es tan importante, veamos los temas que aprenderás durante el curso:

• Introducción
• ¿Qué es Flexbox?
• Importancia de Flexbox
• Fundamentos de Flexbox
• Herramientas que usarás durante el curso
• Cómo configurar tu entorno de desarrollo
• Propiedades relacionadas con contenedores
• Pérdida de datos en CSS
• Propiedades relacionadas con descendientes (hijos)
• Ejemplo: Barra de navegación
• Ejemplo: Diseño clásico
• Flexbox vs. Grid

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Leosbel Poll Sotomayor.

• YouTube: LeoDev
• Twitter: @_LeoDev
• LinkedIn: Leosbel Poll Sotomayor

¿Cómo funcionará esto?

Hay un link debajo de cada uno de los layouts para ver el código HTML y CSS en CodePen. Puedes darte cuenta que uso SASS para la definición de estilos, si quieres hacerlo en tu local, debes instalar SASS usando:

npm i sass -g

Plantilla de una tarjeta básica

Utilicé la tarjeta anterior como base del diseño del layout. Está compuesto por tres elementos en dirección vertical, por lo que los bloques div funcionan bastante bien. Sin embargo, necesitaré hacer que el elemento central (el párrafo) se estire.

Ganador: Flexbos

CodePen Flexbox CodePen Grid

Empecemos creando nuestros diferentes layouts.

#1 Tarjeta verticalmente y horizontalmente centrados

Con Flexbox, necesitamos un elemento centrado horizontalmente, y otro (el elemento hijo) que sea centrado verticalmente. El orden de los elementos es definido por flex-direction. La forma en que el elemento se posiciona en el espacio disponible se establece mediante align-self en el elemento o align-items en el elemento padre.

Con Grid, necesitamos tres columnas y tres filas. Con esto podemos posicionar la tarjeta en la celda del medio. Centrar horizontalmente es sencillo. Definimos tres columnas y su tamaño usando grid-template-columns: auto 33% auto ya que la tarjeta debe ser tan ancha como 1/3 del área visible.

El problema es que nosotros no sabemos la dimensiones verticales, queremos que las filas superior e inferior ocupen el espacio restante que no es posible con la cuadrícula. La tarjeta está centrada, pero su altura depende de la altura de la ventana. Sin embargo, podemos solucionar esto con un elemento adicional alrededor de la tarjeta y centrarlo usando margin.

Ganador: Flexbos

CodePen Flexbox CodePen Grid

#2 Dos tarjetas vertical y horizontalmente centradas

A menudo necesitamos centrar más de un elemento. Estas dos tarjetas también deben mantener la misma altura si una u otra contiene un texto más largo.

Con Flexblox, necesitamos agrupar ambas tarjetas en otro elemento y usarlo para centrar ambas a la vez. No podemos usar align-items aquí ya que se aplica al eje Y en este caso. Necesitamos definir como el espacio restante en el eje X debe ser distribuido usando justify-content: center. Esto asegura que ambas tarjetas estén centrados horizontalmente.

Si omitimos el problema de la altura variable de Grid, podemos alcanzar el mismo resultado incluso sin ningún elemento agrupador adicional. En esta ocasión definimos un cuadrícula con cinco columnas con rid-template-columns: auto 33% 50px 33% auto. El resto permanece como el ejemplo anterior.

Ganador: Flexbos

CodePen Flexbox CodePen Grid

#3 Multiples tarjetas con el mismo tamaño

Este es otro caso de uso típico para blogs, sitios de comercio electrónico (e-commerce), o en general, cualquier sitio que muestre algún tipo de listado. Queremos que las tarjetas tengan el mismo ancho y alto. La altura se debe inferir del elemento más grande en la lista.

Esto se puede hacer en Flebox usando flex-wrap:wrap. Los elementos pasan a la siguiente línea si su ancho excede el espacio restante de cada línea. Sin embargo, la misma altura sólo se conserva en el ámbito de una sola línea, a menos que se defina explícitamente.

Grid muestra su verdadero poder aquí. Este diseño se puede crear usando grid-auto-rows: 1fr que aplica la misma altura a todas las líneas.

Ganador: Grid

CodePen Flexbox CodePen Grid

#3 Alternando entre textos e imagenes centrados horizontalmente y verticalmente

En este ejemplo, tenemos texto con botones CTA acompañados con imágenes del otro lado. Ambos componentes deben ser centrados verticalmente, ya que su tamaño puede variar.

Esto es pan comido para Flexbox. Cada fila es un elemento de un artículo dividido en dos contenedores, .imgy .content. Son necesarios para una distribución uniforme (flex-basis: 50%). El centrado vertical del contenido interno es definido usando align-items: center. La alternancia se logra invirtiendo la dirección de Flexbox usando flex-direction: row-reverse en cada artículo impar.

Grid maneja este caso bastante bien también. No necesitamos definir un gran grid, sino más bien uno por cada artículo. Define columnas igualmente anchas que están verticalmente centradas usando align-items: center y la alternancia se define a nivel de celda mediante valores conmutados grid-column.

Ganador: Empate

CodePen Flexbox CodePen Grid

#5 Cabecera horizontal con menú

Para lograr este diseño usando Flexbox, ambos lados de la cabecera necesitan ser representados como un solo elemento.

El logo y el nombre de la compañía como un solo elemento anchor a la izquierda, y el menú es un elemento nav a la derecha. Flexbox los posiciona con justify-content: space-between.

Con Grid, necesitamos dos columnas - una para el logo y otra para el menú. El menú es otro grid que distribuye el tamaño de las columnas usando grid-template-columns: repeat(4, minmax(0, 1fr)). El problema aquí es que si queremos añadir otro elemento al menú, también necesitamos modificar el CSS.

Ganador: Flexbox

CodePen Flexbox CodePen Grid

Y el ganador es ....

El puntaje final es 5:2 a favor de Flexbox, pero esto no significa que esto lo convierta en el mejor. Hay situaciones donde se necesita usar uno u otro, algunas ocasiones usarlos juntos para alcanzar lo que se necesita.

Si necesitas flexibilidad y posiciones condicionadas trabajar con Flexbox. Si quieres crear listas o estructuras similares que requieran elementos de tamaños iguales o tener una forma de tabla trabajar con Grid.

Como programador front-end, no te saldrás con la tuya sin saber ambos.

Guía de Flexbox Guía de Grid

Traducido del artículo de Ondrej Polesny - Flexbox vs Grid - How to Build the Most Common HTML Layouts