Flexbox: Construye Interfaces Sin Morir en el Intento

ene 04, 2024

Si quieres aprender sobre Flexbox, una herramienta esencial para el diseño web moderno, este blog es lo que estabas buscando. Te hablaré desde los fundamentos Flexbox hasta técnicas avanzadas, con ejemplos prácticos y consejos clave. No importa si apenas vas comenzando o ya tienes experiencia en este mundo, aquí encontrarás todo lo que necesitas para dominar Flexbox, así que empecemos.

Introducción a Flexbox

Flexbox es la abreviatura de Flexible Box Layout y es un modelo de diseño de CSS que permite a los desarrolladores crear interfaces complejas y responsivas de una forma muy sencilla. Antes de que existiera Flexbox los desarrolladores tenían que utilizar tablas o incluso técnicas como el uso de float y positioning para organizar los elementos, lo cual era complicado si se querían obtener diseños responsivos y dinámicos.

Lo maravilloso de Flexbox radica en su capacidad para alinear y distribuir el espacio entre los elementos de un contenedor de manera eficiente, incluso cuando su tamaño pueda ser dinámico. Esta flexibilidad lo convirtió de una herramienta ideal para el diseño web moderno, donde existe una gran variedad de tamaños de pantalla.

Flexbox simplifica el proceso de diseño de layouts, haciendo que sea más intuitivo y menos propenso a errores.

Si se quiere centrar un elemento, de forma horizontal y vertical, gracias a Flexbox se puede hacer con pocas líneas de código, en comparación con enfoques previos en los cuales se tendría muchísimos pasos a seguir y cálculos que se vuelven innecesarios con la existencia de Flexbox.

La adopción de esta herramienta ha marcado un antes y un después en el diseño web, siendo hoy en día una herramienta esencial en el arsenal de cualquier desarrollador frontend que se respete.

Conceptos Básicos de Flexbox

Flexbox es un modelo de diseño unidimensional, esto quiere decir que se centra en el flujo de elementos a lo largo de un eje principal que puede ser horizontal o vertical.

Los conceptos básicos que conforman la base de Flexbox son los siguientes:

Contenedor Flex (Flex Container)

El contenedor es el emento al que se le aplica la propiedad display: flex o display: inline-flex. Este elemento se volverá la base para aplicar las propiedades de Flexbox.

Dentro del contenedor flex, puedes controlar la dirección, el espaciado, el alineamiento y el orden de los elementos hijos.

Elementos Flex (Flex Items)

Los elementos dentro de un contenedor flex son como elementos flex o hijos. Estos elementos se pueden manipular individualmente o en grupo a través de las diferentes propiedades que tiene Flexbox.

A diferencia de los métodos tradicionales de CSS, en Flexbox, la mayoría de las veces solo es necesario aplicar estilos al contenedor flex para lograr el diseño deseado.

Ejes

Eje principal (Main Axis): Es la dirección principal en la que se alinean los elementos flex. Puede ser horizontal (flex-direction: row) o vertical (flex-direction: column).
Eje Cruzado (Cross Axis): Es perpendicular al eje principal. Si el eje principal es horizontal, el eje cruzado es vertical y viceversa.

Orden y Flexibilidad

Flexbox permite cambiar el orden visual de los elementos sin afectar el orden del código HTML, utilizando la propiedad order.

Los elementos flex pueden crecer o encogerse para adaptarse al espacio disponible dentro del contenedor y esto se controla con las propiedades flex-grow, flex-shrink y flex-basis.

Entender todos estos conceptos es fundamentar para aprovechar las capacidades que brinda el uso de Flexbox, lo cual te permitirá experimentar con diseños más complejos y responsivos. El nivel de control y precisión que ofrece Flexbox dentro de su flujo de trabajo simplifica considerablemente el proceso de diseño web y termina haciendo tu vida más fácil.

Propiedades del Contenedor Flex

Las propiedades que Flexbox habilita para el contenedor padre (contenedor flex) son fundamentales para controlar el comportamiento y la disposición de los elementos hijos (elementos flex) dentro del contenedor.

A continuación detallaré las propiedades más importantes que pueden ser utilizadas dentro del contenedor padre, así como ejemplos de código para ilustrar su uso.

display

Esta propiedad se utiliza para definir un contenedor flex y puede recibir dos valores que son flex e inline-flex.

El valor flex crea un bloque de nivel de contenedor, mientras que inline-flex crea un contenedor de nivel en línea.

<!--  HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div> 
</div>

<!-- CSS -->
.container {
  display: flex;
  background-color: lightblue;
  width: 600px;
  height: 100px;
}

.item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
  color: white;
}

flex-direction

Establece la dirección de los elementos flex dentro del contenedor, ya sea en una fila o columna, y en orden normal o inverso.

Los valores que puede recibir esta propiedad son: row, row-reverse, column y column-reverse

<!--  HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div> 
</div>

<!-- CSS -->
.container {
  display: flex;
  flex-direction: row-reverse;
  background-color: lightblue;
  width: 600px;
  height: 100px;
}

.item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
  color: white;
}

justify-content

Esta propiedad sirve para alinear los elementos flex dentro del contenedor a lo largo del eje principal. Es útil para controlar el espaciado y la alineación de los elementos.

Los valores que puede recibir esta propiedad son: flex-start, flex-end, center, space-between, space-around y space-evenly.

<!--  HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div> 
</div>

<!-- CSS -->
.container {
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
  width: 600px;
  height: 100px;
}

.item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
  color: white;
}

align-items

Esta propiedad alinea los elementos flex en el eje cruzado. Muy útil para alinear elementos verticalmente cuando flex-direction es row (o horizontalmente para column).

Los valores que puede recibir esta propiedad son: flex-start, flex-end, center, baseline y stretch.

<!--  HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div> 
</div>

<!-- CSS -->
.container {
  display: flex;
  align-items: center;
  background-color: lightblue;
  width: 600px;
  height: 100px;
}

.item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
  color: white;
}

flex-wrap

Controla si los elementos flex se ajustan en varias líneas y cómo lo hacen. Esto permite un diseño más adaptable, especialmente cuando se trabaja con diferentes tamaños de pantalla.

Los valores que puede recibir esta propiedad son: nowrap, wrap y wrap-reverse.

<!--  HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div> 
  ...
  <div class="item">15</div> 
</div>

<!-- CSS -->
.container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightblue;
  width: 600px;
  height: 150px;
}

.item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
  color: white;
}

align-content

Funciona de la misma forma que justify-content, pero para múltiples líneas de elementos flex. Esta propiedad no tiene efecto si hay solo una línea de elementos.

Los valores que puede recibir esta propiedad son: flex-start, flex-end, center, space-between, space-around, stretch.

<!--  HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div> 
  ...
  <div class="item">15</div> 
</div>

<!-- CSS -->
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: lightblue;
  width: 600px;
  height: 150px;
}

.item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
  color: white;
}

Propiedades de los Elementos Flex

Las propiedades de los elementos hijos (elementos flex) permiten controlar cómo cada elemento se comporta dentro del contenedor flex.

A continuación listaré las propiedades más importantes que pueden ser utilizadas para los elementos hijos, así como ejemplos de código para ilustrar su funcionalidad.

flex-grow

Define la capacidad de un elemento para crecer si es necesario. Un valor de 0 significa que el elemento no crecerá. Esta propiedad recibe números como valor.

<!--  HTML -->
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
</div>

<!--  CSS -->
.container {
  display: flex;
  align-items: center;
  background-color: lightblue;
}

.one {
  background-color: steelblue;
  flex-grow: 1;
}

.two {
  background-color: darkblue;
  flex-grow: 0;
}

flex-shrink

Indica cómo un elemento se encogerá en relación con los demás en el contenedor flex. Un valor de 0 previene que el elemento se encoja. Al igual que flex-grow esta propiedad recibe números como valor.

<!--  HTML -->
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
</div>

<!--  CSS -->
.container {
  display: flex;
  align-items: center;
  background-color: lightblue;
}

.one {
  background-color: steelblue;
  flex-shrink: 1;
}

.two {
  background-color: darkblue;
  flex-shrink: 0;
}

flex-basis

Establece el tamaño inicial del elemento antes de que se ajuste con alguna otra propiedad de Flexbox como flex-shrink. El valor de esta propiedad debe de ser definido en pixeles o en cualquier unidad de medida aceptada por CSS.

<!--  HTML -->
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
</div>

<!--  CSS -->
.container {
  display: flex;
  align-items: center;
  background-color: lightblue;
}

.one {
  background-color: steelblue;
  flex-basis: 100px;
}

.two {
  background-color: darkblue;
  flex-basis: 50px;
}

flex

Es una propiedad abreviada para flex-grow, flex-shrink, y flex-basis. Es una forma eficiente de aplicar todas estas propiedades simultáneamente.

<!--  HTML -->
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
</div>

<!--  CSS -->
.container {
  display: flex;
  align-items: center;
  background-color: lightblue;
}

.one {
  background-color: steelblue;
  flex: 1 1 200px;
}

.two {
  background-color: darkblue;
  flex: 0 0 100px;
}

align-self

Permite alinear individualmente un elemento flex en el eje cruzado, anulando así la alineación definida por align-items en el contenedor flex.

Los valores que puede recibir esta propiedad son: auto, flex-start, flex-end, center, baseline y stretch.

<!--  HTML -->
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
</div>

<!--  CSS -->
.container {
  display: flex;
  align-items: center;
  background-color: lightblue;
}

.one {
  background-color: steelblue;
  align-self: flex-start;
}

.two {
  background-color: darkblue;
  align-self: stretch;
}

Ejemplos Prácticos

Como ya has aprendido hasta ahora, Flexbox es una herramienta muy poderosa a la hora de maquetar sitios web y seguramente te estás preguntando qué puedes hacer de forma real con todas las propiedades que te enseñe previamente.

Para resolver esa pregunta, en esta sección de mostraré tres ejemplos prácticos donde podrás observar la versatilidad y eficacia que tiene Flexbox, así que pongamos manos a la obra.

1. Centrar un Elemento Horizontal y Vertical

Centrar un elemento dentro de un contenedor es una tarea común en diseño web. Los desarrolladores backend siempre se quejan de que esto es una tarea casi que imposible… pero hoy te desvelaré el secreto de como centrar cualquier elemento utilizando únicamente dos propiedades de Flexbox.

El código HTML para este ejemplo es:

<div class="container">
  <p class="centered">¡Hola!</p>
</div>

El código CSS es:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 150px;
  background-color: lightblue;
}

.centered {
  background-color: steelblue;
  color: white;
  font-size: 26px;
  padding: 20px;
}

Todo este código da como resultado:

Si quieres ver el resultado en vivo, te dejo el CodePen donde lo cree.

2. Barra de Navegación Responsiva

Una barra de navegación que se ajuste a cualquier pantalla en la que se visualiza es uno de los retos más básicos que te encontrarás a la hora de maquetar sitios web. Utilizando Flexbox, descubrirás que no necesitas más que unas cuantas lineas de código para obtener un resultado bastante satisfactorio.

El código HTML que compone la barra de navegación es:

<nav class="navbar">
  <p class="logo">alexcamachogz</p>
  <ul class="nav-items">
    <li>Inicio</li>
    <li>Servicios</li>
    <li>Contacto</li>
  </ul>
</nav>

El CSS utilizado es:

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
  color: black;
  padding: 10px;
}

.nav-items {
  display: flex;
  list-style: none;
}

.nav-items li {
  margin-left: 20px;
}

Y todo ese código da como resultado, la siguiente barra:

Si quieres ver el resultado en vivo, te dejo el CodePen donde lo cree.

3. Columnas Autoajustables

Un diseño muy común en cualquier web es utilizar columnas que se puedan ir ajustando dinámicamente al tamaño de la pantalla, esto significa que entre más espacio de pantalla más espacio ocuparan y cuando tengas menos espacio incluso se volverán una sola columna.

El código HTML para crear tres columnas es:

<div class="container">
  <div class="column">Columna 1</div>
  <div class="column">Columna 2</div>
  <div class="column">Columna 3</div>
</div>

El CSS utilizado es:

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

.column {
  flex: 1;
  margin: 5px;
  background-color: lightblue;
  padding: 20px;
  min-width: 150px;
}

Este código da como resultado en pantallas grandes:

Y en pantallas pequeñas:

Si quieres ver el resultado en vivo, te dejo el CodePen donde lo cree.

Buenas Prácticas

En cualquier desarrollo es importante seguir buenas prácticas y Flexbox no se queda atrás, ya que es importante seguir algunas para crear diseños eficientes y accesibles.

Evita anidaciones innecesarias: Aunque Flexbox facilita el anidamiento, es recomendable mantener la estructura HTML lo más sencilla posible. Ya que un anidamiento puede hacer que el código se vuelva complicado de entender e incluso de mantener.
Orden del contenido para la accesibilidad: Ya que Flexbox permite cambiar el orden visual de los elementos, es importante que tu HTML mantenga un orden lógico ya que puedes tener usuarios que consumirán tu aplicación a través de lectores de pantalla o utilizarán la navegación por teclado.
Cuida el uso de flex-grow y flex-shrink: Cuando usas de forma excesiva estas propiedades, especialmente en listas largas, puede llegar a afectar el rendimiento de tu aplicación. Esto no significa que no las utilices, simplemente úsalos solo cuando sea necesario.
Utiliza de flex-basis: Prefiere el uso de esta propiedad sobre width o height para tener un control más preciso del tamaño de los elementos flex, ya que esta pensada exclusivamente para trabajar con elementos flex.
Evita utilizar margin y padding manual: Para alinear y justificar los elementos en la pantalla prefiere el uso de propiedades como align-items, justify-content y align-self y eliminan la necesidad de añadir márgenes de forma manual.

Siguiendo estas prácticas podrás aprovechar al máximo las capacidades que tiene Flexbox para crear diseños mantenibles y accesibles.

Compatibilidad con Navegadores

CSS va sacando mejoras cada cierto tiempo, por lo que la compatibilidad con los navegadores es algo crucial a la hora de trabajar con código CSS. Actualmente Flexbox es ampliamente soportado en casi todos los navegadores modernos, a pesar de eso, aún existen consideraciones importantes a tener en cuenta para garantizar una experiencia de usuario consistente a través de cualquier plataforma.

Compatibilidad Actual

Navegadores Modernos: Todos los navegadores modernos (como las últimas versiones de Chrome, Firefox, Safari, Edge, y Opera) soportan Flexbox completamente.
Internet Explorer: IE 10 y 11 ofrecen soporte para Flexbox, pero con una sintaxis más antigua y con algunos comportamientos inesperados.
Navegadores Móviles: Flexbox funciona bien en navegadores móviles modernos, incluyendo las versiones móviles de Chrome, Safari y Firefox.

Problemas comunes y soluciones

Prefijos

Algunas versiones antiguas de los navegadores pueden requerir prefijos para que las propiedades de Flexbox funcionen correctamente. Como Chrome y Safari que necesitan el -webkit-.

Los prefijos se usan de la siguiente forma:

.flex-container {
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}

Primero se ponen las propiedades con su prefijo y al final la propiedad sin prefijo para los navegadores que no necesiten utilizarlo.

Limitaciones en IE 10 y 11

IE en estas dos versiones tiene soporte muy limitado y bastantes bugs conocidos con Flexbox. Cuando tienes que dar soporte a este tipo de navegadores se recomienda utilizar soluciones alternativas o recurrir a propiedades como float para crear un diseño de respaldo.

Diseño de Respaldo

Cuando los navegadores son tan antiguos que no soportan Flexbox, se recomienda utilizar técnicas de diseño tradicionales como fallback.

.container {
  display: flex;
}
.item {
  flex: 1;
}

@supports not (display: flex) {
  .container {
    display: block;
  }
  .item {
    display: inline-block;
    width: 33.33%;
  }
}

De esta forma cuando la propiedad display: flex no sea soportada, entra el código alternativo, lo cual mantiene la compatibilidad con tu diseño.

Herramientas de Autoprefijado

Existen herramientas que te pueden ayudar a gestionar automáticamente los prefijos para le navegador simplificando el desarrollo, ya que tu solo te preocupas por escribir el código CSS base y estas herramientas como lo son PostCSS y Autoprefixer se encargan de añadir los prefijos que sean necesarios.

Pruebas en Diferentes Navegadores

Un desarrollador frontend que se respeta tiene más de un navegador instalado en su computadora. Esto es esencial ya que te permitirá probar tu diseño en diferentes navegadores que posiblemente tus usuarios también utilizan. Con esto podrás asegurarte que tu trabajo se ve y funciona de forma correcta en todos ellos.

Recursos para Consultar la Compatibilidad

Existen herramientas como Can I Use que te ayudan a verificar la compatibilidad de las las características de CSS e incluso HTML en diferentes navegadores.

Esta herramienta te dará información acerca del comportamiento de la propiedad en los diferentes navegadores e incluso en algunas versiones de estos.

También puedes consultar MDN Web Docs, la cual es una web que te ofrece información detallada sobre la compatibilidad de las propiedades que vayas a utilizar e incluso te da información de las buenas prácticas y el uso correcto de Flexbox.

En resumen, Flexbox fue una revolución en el diseño web, ofreciendo una solución elegante y eficiente para muchos de los desafíos de diseño más comunes en el desarrollo web.

La simplicidad y flexibilidad que tiene esta herramienta y su compatibilidad con navegadores modernos, la hacen ideal tanto para proyectos rápidos como para interfaces de usuario complejas.

No olvides que la experimentación y el hecho de poner todos estos conceptos en práctica te hará dominar esta y cualquier otra tecnología.

Si te gustó el contenido compártelo en tus redes y nos leemos el próximo jueves 👋🏻

Alejandra’s Newsletter

Discusión sobre este post