Flexbox CSS

¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un modelo de diseño en CSS que permite distribuir el espacio de manera eficiente entre los elementos de un contenedor, incluso cuando su tamaño es dinámico o desconocido. Es especialmente útil para construir interfaces responsivas y alineaciones complejas con menos código que otros métodos tradicionales como float o position.

Cómo funciona Flexbox

Cuando aplicas display: flex; a un contenedor, sus hijos se convierten en "ítems flexibles". Estos ítems se distribuyen automáticamente dentro del contenedor dependiendo del espacio disponible y de las propiedades que les apliques.

.container {
  display: flex;
}

También existe display: inline-flex;, que funciona igual pero mantiene el contenedor como un elemento en línea.

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

Concepto clave: main axis y cross axis

Cuando trabajas con Flexbox, el main axis (eje principal) y el cross axis (eje cruzado) son los dos ejes fundamentales sobre los que se distribuyen y alinean los ítems dentro del contenedor flex.

Main axis (eje principal):

• Es la dirección en la que se colocan los ítems flexibles.
• Depende del valor de flex-direction:
  • row (por defecto): el main axis es horizontal, de izquierda a derecha.
  • column: el main axis es vertical, de arriba a abajo.
• Las propiedades que afectan al main axis son:
  • justify-content
  • flex-grow, flex-shrink, flex-basis

Cross axis (eje cruzado):

• Es perpendicular al eje principal.
• Si el flex-direction es row, el cross axis es vertical.
• Si es column, el cross axis es horizontal.
• Las propiedades que afectan al cross axis son:
  • align-items
  • align-self
  • align-content

Esquema

flex-direction: row (main axis → horizontal):
┌──────────────────────────────────────────────┐
│ Container                                    │
│                                              │
│  ┌────────┐ ┌────────┐ ┌────────┐            │
│  │ Item 1 │ │ Item 2 │ │ Item 3 │   ← Main Axis (x)   
│  └────────┘ └────────┘ └────────┘            │
│     ↑         ↑         ↑                    │
│     │         │         │                    │
│  Cross Axis (y) - alignment via align-items  │
│                                              │
└──────────────────────────────────────────────┘

flex-direction: column (main axis → vertical):
┌──────────────┐
│ Container    │
│              │
│  ┌────────┐  │
│  │ Item 1 │  │
│  └────────┘  │
│  ┌────────┐  │
│  │ Item 2 │  │  ↓ Main Axis (y)
│  └────────┘  │
│  ┌────────┐  │
│  │ Item 3 │  │
│  └────────┘  │
│     → Cross Axis (x) - align-items         
└──────────────┘

Flex container

• Un contenedor (div, section, main, etc) cuyo modo de display es Flex.

##Flex item

• Los elementos directamente descendientes de un Flex container.

Propiedades clave de Flexbox

En el contenedor (flex container)

• display: flex o inline-flex: activa el contexto flex.
• flex-direction: dirección de los ítems. Ej: row, column,row-reverse y column-reverse.
• justify-content: alinea los ítems a lo largo del eje principal. Ej: flex-start, center, space-between.
  • Si usas flex-direction: row (por defecto), el main axis es horizontal → justify-content alinea horizontalmente (de izquierda a derecha).
  • Si usas flex-direction: column, el main axis es vertical → justify-content alinea verticalmente (de arriba a abajo).
• align-items: alinea los ítems en el eje cruzado. Ej: stretch, center, flex-start.
• flex-wrap: permite que los ítems se envuelvan si no caben. Ej: wrap, nowrap.
  • align-content se usa cuando hay múltiples líneas de ítems flex —es decir, cuando flex-wrap: wrap está activo y el contenido se desborda y salta a nuevas filas (o columnas, si estás en flex-direction: column).
• gap: define el espacio entre ítems.

En los ítems (flex items)

• flex-grow: determina cuánto espacio adicional puede ocupar un ítem en proporción a los demás.

.item {
  flex-grow: 2; /* This will grow twice than flex-grow: 1 */
}

• flex-shrink: controla cuánto se reducirá un ítem cuando no haya suficiente espacio disponible.

.item {
  flex-shrink: 1; /* Default value, can shrink */
}

• flex-basis: define el tamaño inicial del ítem antes de repartir el espacio extra. Puede ser un valor fijo (como 200px) o auto.

  .item {
    flex-basis: 150px; /* Item starts with this width */
  }
  

  • flex-basis reemplaza a width o height, dependiendo de si el main axis es horizontal o vertical.
  • Si usas flex-direction: row (por defecto), entonces flex-basis actúa como width.
  • Si usas flex-direction: column, entonces flex-basis actúa como height.

• flex: propiedad abreviada que combina flex-grow, flex-shrink y flex-basis.

.item {
  flex: 1 0 200px; /* grow: 1, shrink: 0, basis: 200px */
}

• align-self: sobreescribe align-items solo para ese ítem.

Ejemplos

Card

<div class="card-list">
  <div class="card">Card A</div>
  <div class="card">Card B with more content</div>
  <div class="card">Card C</div>
</div>

.card-list {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.card {
  flex: 1;
  padding: 16px;
  background: #f0f0f0;
  border-radius: 8px;
}

Demostración visual de propiedades flex

Este ejemplo muestra cómo cada propiedad afecta al comportamiento del ítem. Puedes ajustar el ancho del contenedor para ver los efectos en tiempo real.

<div class="demo-flex">
  <div class="box grow">Grow</div>
  <div class="box shrink">Shrink</div>
  <div class="box basis">Basis</div>
</div>

.demo-flex {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #eee;
}

.box {
  background: #4a90e2;
  color: white;
  text-align: center;
  padding: 20px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;
}

.grow {
  flex-grow: 2;
}

.shrink {
  flex-shrink: 2;
}

.basis {
  flex-basis: 150px;
}

Buenas prácticas

• Úsalo para layouts de componentes, distribuciones simples o agrupaciones.
• Asegúrate de conocer bien la relación entre flex-grow, flex-shrink y flex-basis.
• No uses Flex para estructuras de página más complejas (dos dimensiones): usa Grid en su lugar.
• Explora visualmente con DevTools (modo layout → flex).

Recursos útiles

• MDN: Flexbox
• CSS Tricks: A Complete Guide to Flexbox
• Flexbox Froggy (juego interactivo)