La guía definitiva de Flexbox: aprender a través de ejemplos

¿Cuál es la mejor forma de entender Flexbox ? Aprenda los fundamentos y luego cree muchas cosas. Y eso es exactamente lo que vamos a hacer en este artículo.

Algunas cosas a tener en cuenta

• Este artículo se escribió pensando en desarrolladores intermedios y se supone que ya sabe un poco sobre Flexbox. Pero…
• Si conoce algo de CSS, pero no conoce Flexbox en absoluto, escribí una guía completa aquí (artículo gratuito, lectura de 46 minutos).
• Y si no conoces muy bien CSS, te recomiendo que realices mi Introducción completa (práctica) a CSS (curso pagado con 74 lecciones).
• No es necesario que siga los ejemplos de este artículo en el orden que se enumeran aquí.
• Flexbox es solo una técnica de diseño. Los proyectos del mundo real requieren más que diseños.
• Cuando vea una notación como div.ohansse refiere a un div con un nombre de clase deohans

Ejemplo 1: Cómo hacer una galería de fotos con Flexbox

Hacer fotos en filas y columnas con Flexbox es más fácil de lo que la mayoría de las personas perciben.

Considere un marcado simple, así:

Tenemos 10 imágenes dentro de un main.gallery.

Suponga que main.galleryse diseñó para cubrir la pantalla disponible.

.gallery { min-height: 100vh}

Una nota rápida sobre las imágenes

Por defecto, las imágenes son inline-blockelementos. Tienen un ancho y un alto. Permanecerán en una línea, excepto cuando estén restringidos por el tamaño, como que las imágenes sean demasiado grandes para caber en una línea.

El punto de partida

Poniendo todo junto, el resultado de todo el marcado y estilo de arriba es este:

Ahora, haz que Flexbox entre en escena:

.gallery { display: flex }

En este punto, el comportamiento predeterminado de las imágenes ha cambiado. Pasan de ser inline-blockelementos a serflex-items.

Como resultado del contexto de Flexbox iniciado dentro .gallery, las imágenes ahora se aplastarán en una sola línea. Además, se estirarían a lo largo de la vertical así:

Este es el resultado del comportamiento predeterminado de Flexbox:

1. Aplasta todos los elementos secundarios en una sola línea. No envuelva los elementos.

Esto es malo para una galería, así que cambiamos este comportamiento así:

.gallery { flex-wrap: wrap}

Esto ahora envolverá los elementos y los dividirá en varias líneas cuando sea apropiado.

2. Las imágenes ahora pasan a la siguiente línea. Pero todavía se extienden a lo largo de la vertical. Ciertamente no queremos ese comportamiento ya que distorsiona las imágenes.

El stretchcomportamiento se debe al align-itemsvalor predeterminado en los flexcontenedores.

align-items: stretch

Cambiemos eso:

.gallery { ... align-items: flex-start}

Esto evitará que las imágenes se estiren. Asumirán sus valores widthy height valores predeterminados .

También se alinearán con el inicio del eje vertical como se ve a continuación:

Ahora tenemos nuestra galería con tecnología Flexbox.

La ventaja de usar Flexbox

En este punto, no hay mucha ventaja en usar Flexbox. Tenemos el mismo aspecto que teníamos antes de iniciar el modelo Flexbox .

Además de obtener una galería receptiva de forma gratuita, las otras ventajas de usar Flexbox provienen de las opciones de alineación que ofrece.

Recuerde que el contenedor flexible .galleryasume los siguientes valores de propiedad. flex-direction: rowjustify-content: flex-startyalign-items: flex-start.

El diseño de la galería se puede cambiar en un instante jugando con los valores predeterminados como se muestra a continuación:

.gallery { ... justify-content:center;}

Como se ve en la imagen de arriba, esto alineará las imágenes al centro, a lo largo de la horizontal:

.gallery { ... justify-content:center; align-items: center;}

Como se ve en la imagen de arriba, esto alinea las imágenes tanto horizontal como verticalmente con el centro de .gallery

Con Flexbox viene una gran cantidad de opciones de alineación. Siéntase libre de jugar con algunas opciones de alineación más según lo considere oportuno.

Puede ver la galería de Flexbox real en este CodePen.

Ejemplo 2: Cómo crear tarjetas con Flexbox

Las tarjetas se han vuelto populares en Internet. Google, Twitter, Pinterest y, al parecer, todos los demás se están moviendo hacia las tarjetas.

Una tarjeta es un patrón de diseño de interfaz de usuario que agrupa información relacionada en un contenedor de tamaño flexible. Se parece visualmente a un naipe.

Hay muchos buenos usos para las tarjetas. Una común es la infame tabla de precios.

Construyamos uno.

El marcado

Cada tarjeta asumirá un marcado como el siguiente:

Habrá al menos 3 cartas. Envuelva las cartas en undiv.cards

Ahora tenemos un elemento padre.

Para este ejemplo, el elemento principal se ha configurado para llenar toda la ventana gráfica.

.cards { min-height: 100vh}

Configurar Flexbox

El siguiente bloque de código iniciará un contexto de formato de Flexbox dentro de .cards

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

Si recuerda el último ejemplo, flex-wrappermitirá flex-itemsque se rompa en otra línea.

Esto sucede cuando los elementos secundarios no pueden caber en el elemento principal. Esto se debe al mayor tamaño de ancho calculado de los elementos secundarios combinados.

Adelante, dale .cardun ancho inicial.

Usando Flexbox:

.card { flex: 0 0 250px}

Esto establecerá los valores flex-growy flex-shrinken 0. El flex-basisvalor se establecerá en250px

En este punto, las tarjetas estarán alineadas al inicio de la página. También se estirarán a lo largo de la vertical.

En algunos casos, esto puede ser ideal para su caso de uso. Pero en la mayoría de los casos, no será así.

El comportamiento predeterminado de los contenedores flexibles

El resultado anterior se debe al comportamiento predeterminado de los contenedores flexibles.

Las tarjetas comienzan al principio de la página en el top leftporque justify-contentse establece en el valor flex-start.

Además, las tarjetas se estiran para llenar toda la altura del elemento principal porque align-itemsestá configurado como stretchpredeterminado.

Modificar los valores predeterminados

Podemos lograr resultados bastante impresionantes cambiando los valores predeterminados que ofrece Flexbox.

Vea abajo:

Para ver el proyecto final, consulte este CodePen.

Ejemplo 3: Cómo construir cuadrículas con Flexbox

Los marcos CSS completos se basan en el concepto que se discutirá en este ejemplo. Es algo muy importante.

¿Qué es una cuadrícula?

Una cuadrícula es una serie de líneas de guía verticales y horizontales rectas que se cruzan y se utilizan para estructurar el contenido.

Si está familiarizado con los marcos CSS como Bootstrap, entonces seguro que ha usado cuadrículas antes.

Su kilometraje puede diferir, pero consideraremos diferentes tipos de cuadrícula en este ejemplo.

Empecemos por el primerorejillas básicas .

Cuadrículas básicas

Se trata de cuadrículas con las siguientes características:

• Las celdas de la cuadrícula deben espaciarse por igual y expandirse para ajustarse a toda la fila.
• Las celdas de la cuadrícula deben tener la misma altura.

Es fácil lograr esto con Flexbox. Considere el marcado a continuación:

 1 

Cada uno .rowtendrá su propio contenedor flexible.

Cada elemento dentro .rowse convierte en un elemento flexible. Todos los elementos flexibles se distribuyen uniformemente en toda la fila.

Por diseño, no debería importar si tenemos 3 elementos secundarios

 1/3 1/3 1/3 

O 6 elementos secundarios

 1/6 1/6 1/6 1/6 1/6 1/6 

O 12 elementos

 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 

La solución

Solo hay dos pasos para hacer esto.

1. Inicie un contexto de formato de Flexbox:

.row { display: flex;}

2. Haga que cada uno se flex-itemexpanda para ajustarse a toda la fila en proporciones iguales:

.row_cell { flex: 1}

Y eso es.

Explicación de la solución.

flex: 1

flexes un nombre de propiedad abreviada para establecer tres propiedades distintas FlexBox, las flex-grow, flex-shrinky flex-basispropiedades, en el orden indicado.

flex: 1solo tiene el valor 1establecido. Este valor se atribuye a la flex-grow propiedad.

Las propiedades flex-shrinky flex-basisse establecerán en 1y 0.

flex: 1 === flex: 1 1 0

Celdas de cuadrícula con tamaños específicos

A veces, lo que desea no es una fila de cuadrícula de celdas iguales.

Es posible que desee celdas que sean el doble de las otras celdas, o cualquier fracción para el caso.

La solución es bastante sencilla.

A estas celdas de cuadrícula específicas, agregue una clase de modificador como esta:

.row_cell--2 { flex: 2}

Haga que la clase se incluya en el marcado. Vea el primer niño diven el marcado a continuación:

 2x 1/3 1/3 

La celda con la clase .row__cell--2será el doble de las celdas predeterminadas.

Para una celda que ocupa 3 veces el espacio disponible:

.row_cell--3 {

flex: 3

}

Celdas de cuadrícula con alineaciones específicas

Gracias a Flexbox, cada celda no tiene que estar vinculada a un determinado valor de alineación. Puede especificar la alineación específica para cualquier celda.

Para hacerlo, use clases modificadoras como esta:

.row_cell--top { align-self: flex-start}

Esto alineará la celda específica con la parte superior del row.

También debe haber agregado la clase a la celda específica en el marcado. Vea el primer niño diven el marcado a continuación:

A continuación se muestran las otras opciones de alineación disponibles:

.row_cell--bottom { align-self: flex-end}

.row_cell--center { align-self: center}

Alineación general dentro de las filas

Como se pueden alinear celdas específicas, también se pueden alinear todos los elementos secundarios dentro de la fila.

Para hacer esto, use una clase modificadora como esta:

.row--top { align-items: flex-start}

Es importante tener en cuenta que la clase modificadora, .row--topdebe agregarse a la rowo al padreflex-container

Las otras opciones de alineación se pueden ver a continuación:

.row--center { align-items: center}

.row--bottom { align-items: flex-end}

Cuadrículas anidadas

Sin hacer nada en particular, estos rowsse pueden anidar dentro de sí mismos.

Puede ver las cuadrículas finales creadas aquí.

Incluso más cuadrículas

Si bien puede obtener elegantes rejillas de construcción con rejillas verticales Flexbox y configuraciones aún más complejas, utilice la mejor herramienta para el trabajo. Aprenda, domine y use el diseño de cuadrícula CSS. Es la solución CSS definitiva para Grids.

Ejemplo 4: Cómo crear diseños de sitios web con Flexbox

La comunidad generalmente desaprueba el uso de Flexbox para diseños web completos.

Si bien estoy de acuerdo con esto, también creo que en ciertos casos puede salirse con la suya.

El consejo más importante que puedo dar aquí sería:

Use Flexbox donde tenga sentido

Explicaré esa declaración en el siguiente ejemplo.

El diseño del Santo Grial

¿Qué mejor diseño de sitio web para construir que el infame " santo grial "?

Hay 2 formas de intentar construir este diseño con Flexbox.

La primera es tener el diseño construido con Flexbox. Coloque el header, footer, nav, articley asidetodo en uno flex-container.

Empecemos por eso.

El marcado

Considere el marcado básico a continuación:

 Header  Article Nav Aside  Footer

Entre otras, hay una regla particular a la que se adhiere el santo grial. Esta regla ha inspirado el marcado anterior:

La columna central articledebe aparecer primero en el marcado, antes de las dos barras laterales navy aside.

Iniciar el contexto de formato de Flexbox

body { display: flex}

Debido a que los elementos secundarios deben apilarse de arriba a abajo, se debe cambiar la dirección predeterminada de Flexbox.

body { ... flex-direction: column}

1 . headery footerdebe tener un ancho fijo.

header,footer { width: 20vh /*you can use pixels e.g. 200px*/}

2.main debe hacerse para llenar el espacio restante disponible dentro delflex-container

main { flex: 1}

Suponiendo que no lo olvidó, flex: 1es equivalente a flex-grow: 1, flex-shrink: 1yflex-basis: 0

En este punto, debemos cuidar los contenidos dentro de los maincuales se encuentran article, navy aside.

Configurar maincomo flex-container:

main { display: flex}

Tener navy asideocupar anchos fijos:

nav,aside { width: 20vw}

Asegúrese de que articleocupe el espacio disponible restante:

article { flex: 1}

Solo queda una cosa más por hacer ahora.

Reordene flex-itemslo que navse muestra primero:

nav { order: -1}

La orderpropiedad se utiliza para reordenar la posición de flex-items.

Todo flex-itemsdentro de un contenedor se mostrará en valores crecientesorder . Los flex-itemcon los ordervalores más bajos aparecen primero.

Todos flex-itemstienen un ordervalor predeterminado de 0.

El diseño del Santo Grial (otra solución)

La solución anterior utilizó a flex-containercomo contenedor general. El diseño depende en gran medida de Flexbox.

Veamos un enfoque más "cuerdo". Eche un vistazo al supuesto resultado final nuevamente:

headery footerpodrían tratarse como elementos de bloque. Sin ninguna intervención, llenarán el ancho de su elemento contenedor y se apilarán de arriba a abajo.

 Header  Article Nav Aside  Footer

Con este enfoque, lo único flex-containernecesario sería main.

El desafío singular con este enfoque es que tienes que calcular la altura de mainti mismo. maindebe llenar el espacio disponible además del espacio ocupado por el headeryfooter.

main { height: calc(100vh - 40vh);}

Considere el bloque de código anterior. Utiliza la calcfunción CSS para calcular la altura demain.

Cualquiera que sea su kilometraje, la altura de maindebe ser igual acalc(100vh — height of header — height of footer ).

Como en la solución anterior, debe haber dado headery footeruna altura fija. Luego continúe y trate de mainla misma manera que en la solución anterior.

Puede ver los resultados reales aquí.

Diseños de sitios web de 2 columnas

Los diseños de dos columnas son bastante comunes. También se logran fácilmente con Flexbox.

Considere el marcado a continuación:

 sidebar main

Inicie el contexto de formato de Flexbox:

body { display: flex;}

Dar asideun ancho fijo:

aside { width: 20vw}

Finalmente, asegúrese de que se mainllene el espacio disponible restante:

main { flex: 1}

Eso es prácticamente todo lo que hay que hacer.

Ejemplo 5: Objetos multimedia con Flexbox

Los objetos multimedia están en todas partes. Desde tweets hasta publicaciones de Facebook, parecen ser la opción preferida para la mayoría de los diseños de UI.

Considere el marcado a continuación:

 Header 

Como habrás adivinado, .mediaestablecerá el contexto de formato de Flexbox:

.media { display: flex}

De forma predeterminada, los flex-itemsde a containerse estiran a lo largo de la vertical para llenar la altura disponible dentro de flex-container.

Asegúrese de que .media-bodyocupe todo el espacio disponible restante:

.media-body { flex: 1}

Arreglemos la caja estirada.

.media { ... align-items: flex-start}

Y eso es.

Un objeto multimedia volteado

No tiene que cambiar el htmlorden de origen para crear un objeto multimedia invertido.

Simplemente vuelva a ordenar las flex-items así:

.media-object { order: 1}

Esto hará que la imagen se muestre después de .media-bodyymedia-heading

Un objeto de medios anidado

Incluso puede anidar el objeto Media. Sin cambiar ninguno de los estilos CSS que hemos escrito.

 Header 
 Header 

¡Funciona!

Un objeto multimedia Unicode

Parece que no estamos restringidos a solo imágenes.

Sin cambiar ninguno de los estilos CSS escritos, puede hacer que un Unicode represente la imagen.

 ? 
 Header 

Me he acurrucado en un emoji allí.

Quitar el imgy reemplazarlo con un que divcontenga el Unicode deseado da como resultado el resultado anterior. Puede obtener algunos unicodes de emoji más aquí.

Un objeto multimedia de entidad HTML

También puede haber utilizado entidades html como se ve a continuación.

 ☎ 
 Header 

La entidad html utilizada en este ejemplo es ☎y puede ver el resultado a continuación.

Puede ver el resultado de estos ejemplos en este CodePen.

Ejemplo 6: Cómo crear elementos de formulario con Flexbox

Es difícil encontrar un sitio web que no tenga uno o dos formularios en estos días.

Considere el marcado a continuación:

  … …  …  …

Este ejemplo muestra la combinación de alinear campos de entrada con botones o tramos de texto. De nuevo, la solución es bastante fácil con Flexbox.

Inicie el contexto de formato de Flexbox:

.form { display: flex}

Asegúrese de que el campo de entrada ocupe el espacio disponible:

.form__field { flex: 1}

Finalmente, puede diseñar los textos y botones adjuntos o antepuestos de la forma que le parezca adecuada.

.form__item { ... }

Puede ver el resultado completo de este ejemplo en este CodePen.

Ejemplo 7: Cómo crear un diseño de aplicación móvil con Flexbox

En este ejemplo, lo guiaré en el proceso del diseño de la aplicación móvil a continuación:

Sin embargo, este ejemplo es diferente.

Explicaré el proceso de construcción del diseño móvil en pseudocódigo, y tú seguirás adelante para construirlo.

Esta será una forma de práctica para mojarse las manos .

Paso 1

Quita el diseño del iPhone y tenemos esto:

Paso 2

Defina el cuerpo contenedor como flex-container

Paso 3

De forma predeterminada, el flex-directionde a flex-containerestá establecido en row. En este caso, cámbielo a column.

Etapa 4

Proporcione alturas fijas de los elementos 1 y 3, como height: 50px.

Paso 5

El elemento 2 debe tener una altura que llene el espacio disponible. Usa flex-growo la flextaquigrafíaflex: 1.

Paso 6

Por último, trate cada bloque de contenido como un objeto multimedia como se vio en un ejemplo anterior.

Siga los seis pasos anteriores para crear correctamente el diseño de la aplicación móvil.

¿Quieres convertirte en Pro?

Descargue mi hoja de trucos gratuita CSS Grid y también obtenga dos cursos interactivos de Flexbox de calidad gratis

Consígalos ahora