EasyCode365EasyCode365

Introducción a CSS Flexbox

Flexbox es una herramienta de layout CSS para organizar elementos en una fila o en una columna.

Te ayuda a colocar cajas una al lado de otra, centrar contenido, añadir espaciado uniforme, mover elementos a una nueva línea y repartir el espacio disponible entre elementos.

En esta lección, aprenderás los conceptos básicos de Flexbox: contenedores, elementos, dirección, alineación, wrapping, espaciado y proporciones.

Por qué existe Flexbox

Antes de Flexbox, los desarrolladores solían usar floats, inline-block o posicionamiento para crear layouts.

Esas herramientas pueden funcionar, pero no fueron diseñadas para layouts flexibles de interfaces. Flexbox se creó para facilitar los layouts de una dimensión.

Una dimensión significa layout en una dirección principal a la vez:

  • una fila
  • una columna

Para layouts completos de dos dimensiones, CSS Grid suele ser una mejor herramienta. Para filas, columnas, barras de navegación, barras de herramientas y grupos de tarjetas, Flexbox suele ser una gran opción.

Qué es un flex container

Un flex container es el elemento padre que controla un layout Flexbox.

Lo creas añadiendo display: flex al padre.

Solo lectura

El contenedor decide cómo se colocan, separan, alinean y dimensionan sus hijos directos.

Qué son flex items

Los flex items son los hijos directos de un flex container.

Solo los hijos directos se convierten en flex items. Los elementos anidados más profundamente dentro de esos hijos no son flex items, a menos que su propio padre también use display: flex.

Solo lectura
<div class="container">
  <div>Flex item</div>
  <div>Flex item</div>
</div>

El padre es el flex container. Los dos <div> hijos directos son flex items.

Activar Flexbox con display: flex

El ejemplo más pequeño de Flexbox necesita una sola regla en el padre: display: flex.

Por defecto, los flex items se alinean en una fila.

Se puede editar
<div class="container">
  <div class="box">Caja 1</div>
  <div class="box">Caja 2</div>
  <div class="box">Caja 3</div>
</div>

<style>
  .container {
    display: flex;
    padding: 12px;
    background-color: #e5e7eb;
    font-family: Arial, sans-serif;
  }

  .box {
    padding: 16px;
    margin: 4px;
    background-color: #2563eb;
    color: white;
    border-radius: 6px;
  }
</style>

Las tres cajas se convierten en una fila porque el padre ahora es un flex container.

Main axis y cross axis

Flexbox usa dos direcciones importantes:

  • El main axis es la dirección que siguen los flex items.
  • El cross axis es la dirección que cruza el main axis.

Con el valor predeterminado flex-direction: row, el main axis va de izquierda a derecha, y el cross axis va de arriba hacia abajo.

Si cambias a flex-direction: column, los ejes se intercambian. El main axis se vuelve vertical, y el cross axis se vuelve horizontal.

Dirección con flex-direction

La propiedad flex-direction controla la dirección principal de los flex items.

Valores comunes:

  • row: los elementos se colocan en una fila horizontal. Es el valor predeterminado.
  • column: los elementos se apilan en una columna vertical.
Se puede editar
<div class="row-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="column-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .row-layout,
  .column-layout {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .row-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .column-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .item {
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    text-align: center;
  }
</style>

Cambiar flex-direction cambia el main axis, lo que también cambia cómo funciona la alineación.

Este ejemplo usa align-items: flex-start para que los elementos de la columna mantengan su ancho natural en lugar de estirarse por todo el contenedor.

Alineación en el main axis con justify-content

justify-content alinea flex items a lo largo del main axis.

Con la dirección row predeterminada, esto normalmente significa alineación horizontal.

Valores comunes:

  • flex-start: los elementos se quedan al inicio.
  • center: los elementos se mueven al centro.
  • flex-end: los elementos se mueven al final.
  • space-between: el primer elemento va al inicio, el último va al final y el espacio se reparte entre ellos.
  • space-around: cada elemento obtiene espacio igual a su alrededor.
  • space-evenly: el espacio entre elementos y en los bordes es igual.
Se puede editar
<div class="toolbar">
  <button>Atrás</button>
  <button>Guardar</button>
  <button>Siguiente</button>
</div>

<style>
  .toolbar {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .toolbar button {
    padding: 8px 12px;
  }
</style>

Prueba cambiar space-between a center para ver cómo los botones se mueven a lo largo del main axis.

Alineación en el cross axis con align-items

align-items alinea flex items a lo largo del cross axis.

Con la dirección row predeterminada, esto normalmente significa alineación vertical.

Por defecto, align-items está en stretch, lo que hace que los elementos crezcan para llenar el cross axis (por ejemplo, alturas iguales en una fila). Usa un valor como center para alinear elementos sin estirarlos.

Se puede editar
<div class="panel">
  <div class="tile small">Pequeño</div>
  <div class="tile tall">Alto</div>
  <div class="tile small">Pequeño</div>
</div>

<style>
  .panel {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 140px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .tile {
    width: 80px;
    display: grid;
    place-items: center;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .small {
    height: 48px;
  }

  .tall {
    height: 96px;
  }
</style>

Los elementos están centrados verticalmente porque align-items funciona cruzando la dirección principal.

Espaciado con gap

La propiedad gap añade espacio entre flex items.

Normalmente es más limpio que añadir margins a cada elemento.

Se puede editar
<div class="link-row">
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</div>

<style>
  .link-row {
    display: flex;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .link-row span {
    padding: 8px 12px;
    background-color: #eef2ff;
    border: 1px solid #4f46e5;
    border-radius: 999px;
  }
</style>

gap crea espacio solo entre los elementos. No añade espacio extra antes del primer elemento ni después del último.

Wrapping con flex-wrap

Por defecto, los flex items intentan quedarse en una sola línea.

Si el contenedor se vuelve demasiado estrecho, los elementos pueden comprimirse o salirse. Usa flex-wrap: wrap para permitir que pasen a nuevas líneas.

Se puede editar
<div class="badge-list">
  <span>Selectors</span>
  <span>Box model</span>
  <span>Typography</span>
  <span>Forms</span>
  <span>Flexbox</span>
</div>

<style>
  .badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 260px;
    font-family: Arial, sans-serif;
    background: #cccccc;
  }

  .badge-list span {
    padding: 8px 12px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 999px;
  }
</style>

Wrapping es útil para etiquetas, grupos de botones y filas de tarjetas que deben funcionar en pantallas pequeñas.

Proporciones con flex

La propiedad flex controla cómo los flex items crecen y se encogen.

Un patrón simple para principiantes es flex: 1. Si todos los elementos usan flex: 1, comparten el espacio disponible de forma igual.

Se puede editar
<div class="columns">
  <div class="column">Uno</div>
  <div class="column">Dos</div>
  <div class="column">Tres</div>
</div>

<style>
  .columns {
    display: flex;
    gap: 10px;
    font-family: Arial, sans-serif;
  }

  .column {
    flex: 1;
    padding: 20px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    text-align: center;
  }
</style>

Cada columna toma una parte igual de la fila.

Errores comunes de principiantes

  • Poner propiedades del contenedor en el elemento: justify-content, align-items, gap y flex-wrap normalmente van en el flex container.
  • Olvidar que los ejes pueden cambiar: justify-content sigue el main axis, no siempre la dirección horizontal.
  • Esperar que cada elemento anidado sea un flex item: solo los hijos directos del flex container se convierten en flex items.
  • Usar margins en lugar de gap: gap es más simple para separar flex items.
  • Usar Flexbox para todos los layouts: Flexbox es excelente para una dirección. Grid suele ser mejor para layouts de dos dimensiones.

Mini tarea práctica

Mira esta regla CSS:

Solo lectura

Si hay dos botones dentro de .menu, ¿dónde aparecerán?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

  1. ¿Qué propiedad CSS convierte un padre en un flex container?
  2. ¿align-items funciona sobre el main axis o sobre el cross axis?
  3. ¿Qué propiedad permite que los flex items pasen a una nueva línea?

Respuestas:

  1. display: flex.
  2. El cross axis.
  3. flex-wrap.

Respuesta de la mini tarea práctica: el primer botón se mueve al inicio del contenedor y el segundo al final, con espacio vacío entre ellos.

Pequeño desafío

Crea una barra de navegación simple con Flexbox.

Tus objetivos:

  • Convierte .navbar en un flex container.
  • Empuja los enlaces hacia el lado derecho.
  • Añade un gap de 15px entre los enlaces.
Se puede editar
<nav class="navbar">
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Inicio</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Acerca de</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Contacto</a>
</nav>

<style>
  .navbar {
    padding: 20px;
    background-color: #1f2937;
    font-family: Arial, sans-serif;
    /* Activa Flexbox */

    /* Empuja los enlaces a la derecha */

    /* Añade un gap de 15px */
  }

  .nav-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
</style>

Resumen

  • display: flex convierte un padre en un flex container.
  • Los hijos directos de un flex container se convierten en flex items.
  • Flexbox trabaja en una dirección principal a la vez: fila o columna.
  • El main axis sigue flex-direction.
  • El cross axis cruza el main axis.
  • justify-content alinea elementos a lo largo del main axis.
  • align-items alinea elementos a lo largo del cross axis.
  • gap crea espacio limpio entre flex items.
  • flex-wrap: wrap permite que los elementos pasen a nuevas líneas.
  • flex: 1 permite que los elementos compartan el espacio disponible de forma igual.
  • Flexbox es mejor que floats para muchos layouts de una dimensión, pero Grid suele ser mejor para layouts de dos dimensiones.