Flexbox: Qué es, para qué sirve y cómo usar display flex

Descubre cómo usar Flexbox en CSS con esta guía completa. Aprende las propiedades del contenedor y los elementos flexibles para crear diseños web modernos, fluidos y totalmente responsivos paso a paso.

¿Qué es Flexbox y por qué se utiliza en CSS?

El diseño flexible, también conocido como Flexbox, es una de las herramientas más poderosas y versátiles en CSS para la creación de un diseño web moderno y responsivo. Flexbox facilita la alineación y distribución de elementos dentro de un contenedor, permitiendo un control más dinámico y adaptable de los elementos en una página web. En este artículo, exploraremos los conceptos básicos de Flexbox, cómo implementarlo y algunos ejemplos prácticos.

Ventajas de usar Flexbox frente a otros sistemas de diseño

• Diseño unidimensional: Flexbox está diseñado para manejar un solo eje a la vez, ya sea horizontal o vertical. Esto lo hace ideal para diseños lineales y facilita la alineación y distribución de elementos en una sola dirección.

• Alineación y distribución: Flexbox ofrece una amplia gama de propiedades para alinear y distribuir elementos dentro de un contenedor, como justify-content, align-items y align-self. Esto permite un control preciso sobre la disposición de los elementos.

• Responsividad: Flexbox facilita la creación de diseños responsivos que se adaptan a diferentes tamaños de pantalla y dispositivos. Los elementos flexibles pueden crecer, encogerse y ajustarse automáticamente según el espacio disponible.

• Orden visual: Con Flexbox, puedes cambiar el orden visual de los elementos sin alterar el orden en el código HTML, utilizando la propiedad order. Esto es especialmente útil para mejorar la accesibilidad y la experiencia del usuario.

• Simplicidad y legibilidad: El código CSS para Flexbox es generalmente más simple y fácil de leer en comparación con otros métodos de diseño, como floats o posicionamiento absoluto. Esto facilita el mantenimiento y la colaboración en proyectos.

Cómo activar el modo Flexbox con display: flex

Para comenzar a usar Flexbox, primero debes convertir un contenedor en un contenedor flexible aplicando la propiedad display: flex o display: inline-flex al elemento padre. Esto hará que todos los elementos hijos dentro de ese contenedor se comporten como elementos flexibles.

CSS

.container {
  display: flex; /* o display: inline-flex */
}

Estructura básica: contenedor y elementos flexibles

Una vez que hayas activado Flexbox en un contenedor, los elementos hijos dentro de ese contenedor se convierten en elementos flexibles. Estos elementos pueden ser alineados, distribuidos y ordenados utilizando las propiedades específicas de Flexbox.

Propiedades del contenedor Flex (Padre)

Las propiedades del contenedor flexible controlan la disposición y el comportamiento de los elementos flexibles dentro del contenedor. Algunas de las propiedades más comunes incluyen:

flex-direction

Define la dirección en la que se colocan los elementos flexibles (fila, columna, fila inversa, columna inversa).

flex-wrap

Controla si los elementos flexibles deben ajustarse a una nueva línea cuando no hay suficiente espacio en el contenedor.

justify-content

Alinea los elementos flexibles a lo largo del eje principal (horizontal o vertical, dependiendo de la dirección flexible).

align-items

Alinea los elementos flexibles a lo largo del eje transversal (perpendicular al eje principal).

align-content

Alinea las líneas de elementos flexibles cuando hay espacio adicional en el contenedor.

Propiedades de los elementos Flex (Hijos)

Las propiedades de los elementos flexibles controlan el tamaño, la alineación y el orden de los elementos individuales dentro del contenedor flexible. Algunas de las propiedades más comunes incluyen:

La propiedad de crecimiento flexible: flex-grow

Define la capacidad de un elemento flexible para crecer y ocupar espacio adicional en el contenedor.

Con la propiedad flex-grow establecida en un entero positivo, si hay espacio disponible, el elemento flexible puede crecer a lo largo del eje principal desde su base flexible. Si el elemento se estira para ocupar todo el espacio disponible en ese eje, o solo una parte del espacio disponible, depende de si a los otros elementos también se les permite crecer y del valor de sus propiedades de crecimiento flexible.

Cada elemento con un valor positivo consume una parte del espacio disponible en función de su valor de crecimiento flexible. Si le dimos a todos nuestros elementos en el ejemplo anterior un valor de crecimiento flexible de 1, entonces el espacio disponible en el contenedor flexible se compartiría equitativamente entre nuestros elementos y se estirarían para llenar el contenedor en el eje principal. Si le damos a nuestro primer elemento un valor de crecimiento flexible de 2 y a los demás elementos un valor de 1 cada uno, hay un total de 4 partes; Se asignarán 2 partes del espacio disponible al primer elemento (100 px de 200 px en el caso del ejemplo anterior) y 1 parte a cada uno de los otros dos (50 px cada uno de los 200 px en total).

La propiedad de contracción flexible: flex-shrink

Define la capacidad de un elemento flexible para encogerse cuando no hay suficiente espacio en el contenedor.

Mientras que la propiedad flex-grow se ocupa de agregar espacio en el eje principal, la propiedad flex-shrink controla cómo se quita. Si no tenemos suficiente espacio en el contenedor para colocar nuestros elementos y flex-shrink se establece en un número entero positivo, entonces el elemento puede volverse más pequeño que la base flexible. Al igual que con flex-grow, se pueden asignar diferentes valores para hacer que un elemento se reduzca más rápido que otros: un elemento con un valor más alto establecido para flex-shrink se reducirá más rápido que sus hermanos que tienen valores más bajos.

Un elemento puede reducirse hasta su tamaño de contenido mínimo. Este tamaño mínimo se tiene en cuenta al calcular la cantidad real de contracción que se producirá, lo que significa que la contracción flexible tiene el potencial de parecer menos consistente en su comportamiento que el crecimiento flexible. Por lo tanto, veremos más detalladamente cómo funciona este algoritmo en el artículo Control de proporciones de elementos a lo largo del eje principal.

La propiedad de base flexible: flex-basis

Define el tamaño inicial de un elemento flexible antes de que se distribuya el espacio disponible.

La base flexible es la que define el tamaño de ese elemento en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es automático; en este caso, el navegador busca si el elemento tiene un tamaño. En el ejemplo anterior, todos los elementos tienen un ancho de 100 píxeles. Esto se utiliza como base flexible.

Si los elementos no tienen un tamaño, entonces el tamaño del contenido se utiliza como base flexible. Es por eso que cuando simplemente declaramos display: flex en el padre para crear elementos flexibles, todos los elementos se mueven a una fila y ocupan solo el espacio que necesitan para mostrar su contenido.

Valores abreviados para las propiedades flexibles.

Muy raramente verá las propiedades flex-grow, flex-shrink y flex-basis utilizadas individualmente; en cambio, se combinan en la taquigrafía flexible. La abreviatura flex le permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

NOTA

Estos valores para flex-grow y flex-shrink son proporciones. Normalmente, si tuviéramos todos nuestros elementos configurados en flex: 1 1 200px y luego quisiéramos que un elemento creciera al doble de velocidad, configuraríamos ese elemento en flex: 2 1 200px. Sin embargo, también puedes usar flex: 10 1 200px y flex: 20 1 200px si quieres.

CSS

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Similar a: */

.box {
  flex: 0 1 auto;
}

La propiedad de base flexible: align-self

Define la alineación de un elemento flexible a lo largo del eje transversal, anulando la configuración de align-items del contenedor flexible.

Conceptos Básicos de Flexbox: Dos ejes

Cuando trabajas con flexbox necesitas pensar en términos de dos ejes: el eje principal y el eje transversal. El eje principal está definido por la propiedad de dirección flexible y el eje transversal corre perpendicular a él. Todo lo que hacemos con flexbox hace referencia a estos ejes, por lo que vale la pena entender cómo funcionan desde el principio.

El eje principal

El eje principal está definido por flex-direction, que tiene cuatro valores posibles:

• row (fila)
• row-reverse (fila inversa)
• column (columna)
• column-reverse (columna-inversa)

Si eliges fila o fila inversa, su eje principal se ejecutará a lo largo de la fila en la dirección en línea.

Elije columna o columna inversa y su eje principal se ejecutará en la dirección del bloque, desde la parte superior de la página hasta la parte inferior.

El eje transversal

El eje transversal corre perpendicular al eje principal. Por lo tanto, si su dirección flexible (eje principal) está configurada en fila o fila inversa, el eje transversal recorre las columnas.

Si su eje principal es columna o columna inversa, entonces el eje transversal corre a lo largo de las filas.

Líneas de inicio y fin

Otra área vital de comprensión es cómo flexbox no hace suposiciones sobre el modo de escritura del documento. Flexbox no solo asume que todas las líneas de texto comienzan en la parte superior izquierda de un documento y corren hacia el lado derecho, con nuevas líneas que aparecen una debajo de la otra. Más bien, admite todos los modos de escritura, al igual que otras propiedades y valores lógicos.

Si la flex-direction es row y estoy trabajando en inglés, entonces el borde inicial del eje principal estará a la izquierda y el borde final a la derecha.

Si tuviera que trabajar en árabe, entonces el borde inicial de mi eje principal estaría a la derecha y el borde final a la izquierda.

En ambos casos, el borde inicial del eje transversal está en la parte superior del contenedor flexible y el borde final en la parte inferior, ya que ambos idiomas tienen un modo de escritura horizontal.

Después de un tiempo, pensar en el inicio y el final en lugar de izquierda y derecha se vuelve natural y le resultará útil cuando trabaje con otros métodos de diseño, como CSS Grid Layout, que siguen los mismos patrones.

Flexbox y diseño responsive

Cómo combinar Flexbox con media queries

Flexbox es una herramienta poderosa para crear diseños responsivos, pero a veces es necesario combinarlo con media queries para lograr un control más preciso sobre cómo se comportan los elementos en diferentes tamaños de pantalla. Aquí hay algunos consejos sobre cómo hacerlo:

1. Cambiar la dirección del eje principal: Puedes usar media queries para cambiar la propiedad flex-direction en función del tamaño de la pantalla. Por ejemplo, puedes tener una fila de elementos en pantallas grandes y cambiar a una columna en pantallas más pequeñas.

CSS

.container {
  display: flex;
  flex-direction: row; /* Fila por defecto */
}

@media (max-width: 600px) {
  .container {
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
  }
}

2. Ajustar el tamaño de los elementos flexibles: Puedes usar media queries para cambiar las propiedades flex-grow, flex-shrink y flex-basis de los elementos flexibles en función del tamaño de la pantalla. Esto te permite controlar cómo se distribuyen los elementos en diferentes dispositivos.

CSS

.item {
  flex: 1 1 200px; /* Tamaño por defecto */
}

@media (max-width: 600px) {
  .item {
    flex: 1 1 100%; /* Ocupa todo el ancho en pantallas pequeñas */
  }
}

Diferencias entre Flexbox y CSS Grid

Flexbox y CSS Grid son dos sistemas de diseño en CSS que tienen sus propias fortalezas y debilidades. Aquí hay algunas diferencias clave entre ellos:

• Ejes: Flexbox es un sistema de diseño unidimensional, lo que significa que trabaja en un solo eje a la vez (horizontal o vertical). CSS Grid, por otro lado, es un sistema de diseño bidimensional que permite trabajar en ambos ejes simultáneamente.

• Control del espacio: Flexbox es excelente para distribuir espacio entre elementos en una sola dirección, mientras que CSS Grid ofrece un control más preciso sobre la disposición de los elementos en una cuadrícula.

• Complejidad: Flexbox es generalmente más simple y fácil de aprender que CSS Grid, lo que lo hace ideal para diseños más simples. CSS Grid puede ser más complejo, pero ofrece una mayor flexibilidad para diseños más avanzados.

• Compatibilidad: Ambos sistemas tienen un buen soporte en los navegadores modernos, pero Flexbox tiene una compatibilidad ligeramente mejor en navegadores más antiguos.

Cuándo usar Flexbox y cuándo usar Grid

• Usa Flexbox cuando:

  • Necesites alinear elementos en una sola dirección (fila o columna).
  • Quieras distribuir espacio entre elementos de manera flexible.
  • Estés trabajando en un diseño simple que no requiera una estructura de cuadrícula compleja.

• Usa CSS Grid cuando:

  • Necesites una estructura de cuadrícula bidimensional.
  • Quieras tener un control preciso sobre la disposición de los elementos en filas y columnas.
  • Estés trabajando en un diseño más complejo que requiera una organización más avanzada de los elementos.

Errores comunes y cómo evitarlos

Problemas al mezclar float y flex

Uno de los errores más comunes al usar Flexbox es intentar mezclarlo con elementos flotantes (float). Los elementos flotantes pueden interferir con el comportamiento de Flexbox y causar problemas de diseño inesperados. Para evitar esto, asegúrate de no aplicar float a los elementos dentro de un contenedor flexible.

No establecer un tamaño base

Otro error común es no establecer un tamaño base adecuado para los elementos flexibles. Si no se define una base flexible (flex-basis), los elementos pueden comportarse de manera impredecible. Asegúrate de establecer un tamaño base que tenga sentido para tu diseño.

Errores frecuentes con align-items y justify-content

Las propiedades align-items y justify-content son fundamentales para alinear y distribuir elementos en Flexbox. Sin embargo, es fácil cometer errores al usarlas. Asegúrate de entender cómo funcionan estas propiedades y cómo afectan la disposición de los elementos en el contenedor flexible.

Uso incorrecto de flex-basis y width

La propiedad flex-basis define el tamaño inicial de un elemento flexible antes de que se distribuya el espacio disponible. Sin embargo, es importante no confundir flex-basis con la propiedad width. Si ambos se establecen, flex-basis tendrá prioridad en un contenedor flexible. Asegúrate de usar flex-basis para definir el tamaño inicial y evita establecer width a menos que sea necesario.

Flexbox avanzados

Control de proporciones de elementos a lo largo del eje principal

Cuando trabajas con Flexbox, es importante entender cómo controlar las proporciones de los elementos a lo largo del eje principal. Esto se logra utilizando las propiedades flex-grow, flex-shrink y flex-basis. Aquí hay algunos consejos para controlar las proporciones de los elementos:

1. Usa flex-grow para controlar el crecimiento: La propiedad flex-grow define la capacidad de un elemento flexible para crecer y ocupar espacio adicional en el contenedor. Puedes asignar diferentes valores a flex-grow para hacer que algunos elementos crezcan más rápido que otros.

CSS

.item {
  flex-grow: 1; /* Todos los elementos crecen al mismo ritmo */
}

.item-1 {
  flex-grow: 2; /* Este elemento crecerá al doble de velocidad */
}

2. Usa flex-shrink para controlar la contracción: La propiedad flex-shrink define la capacidad de un elemento flexible para encogerse cuando no hay suficiente espacio en el contenedor. Al igual que con flex-grow, puedes asignar diferentes valores a flex-shrink para hacer que algunos elementos se reduzcan más rápido que otros.

CSS

.item {
  flex-shrink: 1; /* Todos los elementos se reducen al mismo ritmo */
}

.item-1 {
  flex-shrink: 2; /* Este elemento se reducirá al doble de velocidad */
}

3. Usa flex-basis para definir el tamaño inicial: La propiedad flex-basis define el tamaño inicial de un elemento flexible antes de que se distribuya el espacio disponible. Asegúrate de establecer un tamaño base que tenga sentido para tu diseño.

CSS

.item {
  flex-basis: 200px; /* Tamaño inicial de 200px */
}

.item-1 {
  flex-basis: 300px; /* Tamaño inicial de 300px */
}

Alineación avanzada con align-self y align-content

Además de las propiedades align-items y justify-content, Flexbox ofrece propiedades adicionales para un control más avanzado de la alineación: align-self y align-content. Aquí hay algunos consejos sobre cómo usarlas:

1. Usa align-self para anular la alineación predeterminada: La propiedad align-self permite anular la alineación predeterminada de un elemento flexible a lo largo del eje transversal. Puedes usar align-self en un elemento individual para cambiar su alineación sin afectar a los demás elementos en el contenedor.

CSS

.item {
  align-self: center; /* Alinea este elemento en el centro del eje transversal */
}

2. Usa align-content para alinear líneas de elementos flexibles: La propiedad align-content se utiliza para alinear las líneas de elementos flexibles cuando hay espacio adicional en el contenedor. Esto es especialmente útil cuando tienes múltiples líneas de elementos flexibles y deseas controlar cómo se distribuyen esas líneas dentro del contenedor.

CSS

.container {
  align-content: space-between; /* Distribuye las líneas de elementos flexibles con espacio entre ellas */
}

Optimización de rendimiento con Flexbox

Aunque Flexbox es generalmente eficiente, hay algunas prácticas recomendadas para optimizar el rendimiento al usar Flexbox en tus diseños:

1. Minimiza el uso de propiedades costosas: Algunas propiedades de Flexbox, como flex-grow y flex-shrink, pueden ser más costosas en términos de rendimiento si se usan en exceso. Trata de limitar su uso a los elementos que realmente lo necesitan.

2. Evita anidar contenedores flexibles innecesariamente: Anidar múltiples contenedores flexibles puede aumentar la complejidad del diseño y afectar el rendimiento. Trata de mantener la estructura de tu HTML lo más simple posible.

3. Usa herramientas de desarrollo para identificar problemas de rendimiento: Utiliza las herramientas de desarrollo del navegador para monitorear el rendimiento de tu diseño Flexbox y detectar cualquier problema potencial.

Recursos

• Unidades de medida: Unidades de medida y posicionamiento en CSS

• Grid: Grid: creación de diseños en cuadrícula

• Más sobre Flexbox: W3schools - CSS Flexbox

Herramientas online para practicar Flexbox

• Flexbox Froggy: Un juego interactivo que te enseña los conceptos básicos de Flexbox a través de desafíos divertidos.

• CSS Flexbox Generator: Una herramienta que te permite generar código CSS Flexbox de manera visual y fácil.

• Flexbox Defense: Otro juego interactivo que te ayuda a aprender Flexbox mientras defiendes tu base.

Ejercicios

💻 Mete mano al código con estos desafíos simples:

• Crear maqueta de layout completo con header, body y footer