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

Nota: esta es una lectura larga, así que si lo desea, puede descargar este artículo y leerlo sin conexión aquí.

¿Cuál es la mejor manera de entender Flexbox? Aprende los fundamentos, luego construye muchas cosas. Y eso es exactamente lo que haremos en este artículo.

Algunas cosas a tener en cuenta

  • Este artículo fue escrito con los desarrolladores intermedios en mente, y asume que ya sabes 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 conoce muy bien CSS, le recomiendo tomar mi Introducción completa (práctica) a CSS (curso pago con 74 lecciones).
  • No tiene que seguir los ejemplos de este artículo en el orden que se detalla 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.ohans, se refiere a un div con un nombre de clase de ohans

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 una galería principal.

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

.gallery {
   Altura mínima: 100vh
}

Una nota rápida sobre imágenes

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

El punto de partida

Al poner todo junto, el resultado de todo el marcado y el estilo anterior es este:

10 imágenes con sus declaraciones de ancho y alto intactas. Caen a la siguiente línea cuando es apropiado. Muchachos obedientes;)

Ahora, ponga Flexbox en escena:

.gallery {
    pantalla: flex
 }

En este punto, el comportamiento predeterminado de las imágenes ha cambiado. Pasan de ser elementos de bloque en línea a ser elementos flexibles.

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

Las imágenes ahora se extienden a lo largo de la vertical y se aplastan en una línea. Nada es más feo :(

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, por lo que cambiamos este comportamiento así:

.gallery {
    flex-wrap: envoltura
}

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

Con el valor de ajuste modificado, las imágenes ahora se ajustan a la siguiente línea

2. Las imágenes ahora se envuelven 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 comportamiento de estiramiento se debe al valor predeterminado de elementos de alineación en contenedores flexibles.

alinear elementos: estiramiento

Cambiemos eso:

.gallery {
  ...
  alinear elementos: inicio flexible
}

Esto evitará que las imágenes se estiren. Asumirán sus valores predeterminados de ancho y alto.

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

Ahora tenemos imágenes que no están distorsionadas. Esto es más o menos donde comenzamos antes de presentar Flexbox.

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

La ventaja de usar Flexbox

En este punto, no hay muchas ventajas al 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, .gallery, asume los siguientes valores de propiedad dirección-flex: fila justify-content: flex-start y align-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: centro;
}
Las imágenes ahora están perfectamente centradas a lo largo de la horizontal.

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

.gallery {
   ...
   justify-content: centro;
   alinear elementos: centro;
}
Dando más pasos, tenemos las imágenes perfectamente alineadas con el centro (horizontal y verticalmente)

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

Con Flexbox hay muchas opciones de alineación. Siéntase libre de jugar con algunas opciones de alineación más cuando lo considere adecuado.

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

Ejemplo 2: Cómo construir tarjetas con Flexbox

Las tarjetas se han vuelto populares en internet. Google, Twitter, Pinterest, y parece que todos los demás se están moviendo a 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 famosa red de precios.

maqueta de cuadrícula de precios de muestra

Vamos a construir uno.

El marcado

Cada tarjeta asumirá un marcado como el siguiente:

     
  
        
  •     
  •     
  •   
  

Habrá al menos 3 cartas. Envuelva las tarjetas en un div.cards

Ahora tenemos un elemento padre.

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

.cards {
   Altura mínima: 100vh
}

Configurar Flexbox

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

.cards {
  pantalla: flex;
  flex-wrap: envoltura
}

Si recuerda el último ejemplo, flex-wrap permitirá que los elementos flex se rompan en otra línea.

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

Continúa y dale a la tarjeta un ancho inicial.

Usando Flexbox:

.card {
  flex: 0 0 250px
}

Esto establecerá los valores de crecimiento flexible y contracción flexible en 0. El valor de base flexible se establecerá en 250 px

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

tarjetas alineadas al inicio de la página

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

El comportamiento predeterminado de los contenedores Flex

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

Las tarjetas comienzan en el inicio de la página en la parte superior izquierda porque justify-content se establece en el valor flex-start.

Además, las tarjetas se estiran para llenar toda la altura del elemento padre porque align-items está configurado para estirarse de manera predeterminada.

Alterando los valores predeterminados

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

Vea abajo:

alinear elementos: inicio flexible; justify-content: centroelementos de alineación: extremo flexible; justify-content: centroalinear elementos: centro; justify-content: centro

Para ver el proyecto final, vea 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 bastante importante.

¿Qué es una cuadrícula?

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

Una serie de líneas de guía rectas (verticales, horizontales) que se cruzan

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

Su millaje puede diferir, pero consideraremos diferentes tipos de grillas en este ejemplo.

Comencemos con la primera, cuadrículas básicas.

Rejillas Básicas

Un conjunto de cuadrículas básicas, cada una con columnas igualmente espaciadas

Estas son cuadrículas con las siguientes características:

  • Las celdas de la cuadrícula deben estar espaciadas por igual y expandirse para ajustarse a toda la fila.
  • Las celdas de la cuadrícula deben ser de igual altura.

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

  
1

Cada .row será su propio contenedor flexible.

Cada elemento dentro de .row se convierte en un elemento flexible. Todos los artículos flexibles se distribuyen de manera uniforme 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 Flexbox:
.fila {
   pantalla: flex;
}

2. Haga que cada elemento flexible se expanda para ajustarse a la fila completa en proporciones iguales:

.row_cell {
   flexión: 1
}

Y eso es.

La solución explicada.

flexión: 1

flex es un nombre de propiedad abreviado para establecer tres propiedades distintas de Flexbox, las propiedades flex-grow, flex-shrink y flex-based, en el orden indicado.

flex: 1 solo tiene el valor 1 establecido. Este valor se atribuye a la propiedad de crecimiento flexible.

Las propiedades de contracción flexible y base flexible se establecerán en 1 y 0.

flex: 1 === flex: 1 1 0

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

A veces, lo que quieres 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.

rejilla de celdas de fila que son 2x o 3x las otras celdas.

La solución es bastante simple.

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

.row_cell - 2 {
   flexión: 2
}

Tener la clase incluida en el marcado. Vea el primer elemento secundario en el marcado a continuación:

  
2x
  
1/3
  
1/3

La celda con la clase .row__cell - 2 será 2 veces las celdas predeterminadas.

Para una celda que ocupa 3 veces el espacio disponible:

.row_cell - 3 {
 flexión: 3
}

Celdas de cuadrícula con alineaciones específicas

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

Para hacerlo, use clases modificadoras como esta:

.row_cell - top {
  autoalinear: inicio flexible
}

Esto alineará la celda específica a la parte superior de la fila.

aplicando la clase .row_cell - top alineará la celda específica a la parte superior de la fila

También debe haber agregado la clase a la celda específica en el marcado. Vea el primer elemento secundario en el marcado a continuación:

  
  
  

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

.row_cell - bottom {
  autoalinearse: extremo flexible
}
aplicando la clase .row_cell - bottom alineará la celda específica al final de la fila
.row_cell - centro {
  alinearse: centro
}
aplicando la clase .row_cell - center alineará la celda específica al centro de la fila

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 de modificador como esta:

.row - top {
   alinear elementos: inicio flexible
}
una fila con las tres celdas alineadas en la parte superior de la fila.

Es importante tener en cuenta que la clase de modificador, .row - top debe agregarse a la fila o al contenedor flexible principal

  
  
  

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

.row - centro {
   alinear elementos: centro
}
una fila con las tres celdas alineadas al centro de la fila.
.row - bottom {
   elementos de alineación: extremo flexible
}
una fila con las tres celdas alineadas al centro de la fila.

Rejillas Anidadas

Sin hacer nada en particular, estas filas se pueden anidar dentro de sí mismas.

Una fila con dos celdas, una 2x la otra. Dentro de la celda más grande, se ha anidado una fila de tres celdas centradas.

Puede ver las cuadrículas finales creadas aquí.

Incluso más cuadrículas

Si bien puede obtener cuadrículas de construcción elegantes con cuadrículas verticales Flexbox e incluso configuraciones más complejas, use 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 construir 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"?

El diseño del santo grial: encabezado, pie de página y otros 3 contenedores de contenido.

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

El primero es tener el diseño construido con Flexbox. Coloque el encabezado, pie de página, navegación, artículo y aparte todo en un contenedor flexible.

Comencemos con eso.

El marcado

Considere el marcado básico a continuación:


  
Encabezado
       
Artículo
            
  
Pie de página

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

La columna central, el artículo debe aparecer primero en el marcado, antes de las dos barras laterales, navegar y a un lado.

" aparece primero en el marcado, pero está centrado en el diseño." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/highresolution-wallpapers/1567754052654.png" />

Iniciar el contexto de formato de Flexbox

cuerpo {
   pantalla: flex
}

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

cuerpo {
 ...
 dirección flexible: columna
}

1. El encabezado y el pie de página deben tener un ancho fijo.

encabezamiento,
pie de página {
  ancho: 20vh / * puede usar píxeles, p. 200px * /
}

2.principal debe hacerse para llenar el espacio restante disponible dentro del contenedor flexible

principal {
   flexión: 1
}

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

Esto hará que el principal

En este punto, debemos ocuparnos de los contenidos dentro de main que son artículo, navegación y a un lado.

Configure main como contenedor flexible:

principal {
  pantalla: flex
}

Haga que el navegador y aparte tomen anchos fijos:

nav,
a un lado {
  ancho: 20vw
}

Asegúrese de que el artículo ocupe el espacio disponible restante:

artículo {
   flexión: 1
}

Solo hay una cosa más que hacer ahora.

Reordene los elementos flexibles para que primero se muestre nav:

nav {
  orden: -1
}
El resultado final. https://codepen.io/ohansemmanuel/full/brzJZz/

La propiedad de pedido se utiliza para reordenar la posición de los elementos flexibles.

Todos los elementos flexibles dentro de un contenedor se mostrarán en valores de orden crecientes. El elemento flexible con los valores de orden más bajos aparece primero.

Todos los artículos flexibles tienen un valor de pedido predeterminado de 0.

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

La solución anterior utilizaba un contenedor flexible como contenedor general. El diseño depende en gran medida de Flexbox.

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

El diseño del santo grial

El encabezado y el pie de página pueden 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.


  
Encabezado
       
Artículo
               
Pie de página

Con este enfoque, el único contenedor flexible necesario sería el principal.

El desafío singular con este enfoque es que tienes que calcular la altura de la tubería tú mismo. main debe llenar el espacio disponible además del espacio ocupado por el encabezado y pie de página.

principal {
  altura: calc (100vh - 40vh);
}

Considere el bloque de código anterior. Utiliza la función de cálculo CSS para calcular la altura de main.

Cualquiera sea su kilometraje, la altura de la tubería principal debe ser igual a la calc (100vh - altura del encabezado - altura del pie de página).

Como en la solución anterior, debe haberle dado al encabezado y pie de página una altura fija. Luego siga adelante y trate a main de la 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.

Diseño de 2 columnas con una barra lateral y área de contenido principal.

Considere el marcado a continuación:


  
  
principal

Inicie el contexto de formato de Flexbox:

cuerpo {
  pantalla: flex;
}

Deje a un lado un ancho fijo:

a un lado {
   ancho: 20vw
}

Finalmente, asegúrese de que main llene el espacio disponible restante:

principal {
  flexión: 1
}

Eso es casi 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 interfaz de usuario.

Ejemplo de publicación de Tweet y Facebook

Considere el marcado a continuación:

     
    

Encabezado

    

  

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

.media {
   pantalla: flex
}

Por defecto, los elementos flexibles de un contenedor se estiran a lo largo de la vertical para llenar la altura disponible dentro del contenedor flexible.

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

.media-body {
   flexión: 1
}
El cuadro de la izquierda se estira para adaptarse a la pantalla disponible. El cuerpo de medios ocupa el espacio horizontal restante dentro del objeto de medios (blanco)

Vamos a arreglar la caja estirada.

.media {
  ...
  alinear elementos: inicio flexible
}
Los elementos flexibles ahora están alineados con el inicio del objeto multimedia. La imagen ahora toma el tamaño predeterminado. No hay estiramientos extraños :)

Y eso es.

Un objeto multimedia invertido

Un objeto multimedia invertido tiene la imagen en el otro lado (derecha) del objeto multimedia

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

Simplemente vuelva a ordenar los elementos flexibles de esta manera:

.media-object {
   orden: 1
}

Esto mostrará la imagen después del encabezado .media-body y media

Un objeto de medios anidado

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

     
    

Encabezado

    

              
         
        

Encabezado

        

    
    
  

¡Funciona!

Objetos de medios anidados dentro de objetos de medios.

Un objeto de medios Unicode

Parece que no estamos restringidos solo a imágenes.

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

  
& # x1F60E;
  
    

Encabezado

    

  

Me acurruqué en un emoji allí.

Objeto multimedia con soporte de emoji.

Quitar el img y reemplazarlo con un div que contenga el unicode deseado produce el resultado anterior. Puede obtener algunos unicodes emoji más aquí.

Un objeto multimedia de entidad HTML

Es posible que también haya usado entidades html como se ve a continuación.

  
& phone;
  
    

Encabezado

    

  

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

entidad html, & phone;

Puede ver el resultado de estos ejemplos en este CodePen.

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

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

entradas de formulario agregadas y antepuestas con otros elementos

Considere el marcado a continuación:

     
   ...   
   ...      

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

Inicie el contexto de formato de Flexbox:

.form {
  pantalla: flex
}

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

.campo de formulario {
   flexión: 1
}

Finalmente, puede diseñar los textos y botones anexados o anexados de cualquier manera que parezca adecuada.

.form__item {
  ...
}

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

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

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

El diseño de la aplicación móvil que crearemos con Flexbox

Sin embargo, este ejemplo es diferente.

Explicaré el proceso de creación del diseño móvil en pseudocódigo, y continuarás para construirlo.

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

Paso 1

Quite el diseño del iPhone, y tenemos esto:

El diseño básico

Paso 2

Definir el cuerpo contenedor como un contenedor flexible.

Inicie el contexto de formato de Flexbox como un contenedor flexible.

Paso 3

Por defecto, la dirección de flexión de un contenedor de flexión se establece en fila. En este caso, cámbielo a columna.

Cambie la dirección de flexión predeterminada para tener 3 elementos secundarios, también conocidos como elementos flex

Etapa 4

Indique las alturas fijas del artículo 1 y 3, como la altura: 50 px.

Paso 5

El artículo 2 debe tener una altura que llene el espacio disponible. Use flex-grow o flex shorthand flex: 1.

Paso 6

Finalmente, trate cada bloque de contenido como un objeto de medios como se ve en un ejemplo anterior.

Trate los bloques de contenido como objetos multimedia.

Siga los seis pasos anteriores para construir con éxito el diseño de la aplicación móvil con éxito.

¿Quieres ser profesional?

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

¡Obtenga la hoja de trucos de la cuadrícula CSS gratuita + dos cursos de Flexbox de calidad gratis!

Consíguelos ahora