Domina Flexbox en CSS

Flexbox (Flexible Box Layout) es un modelo de maquetación CSS que permite diseñar estructuras responsive y flexibles sin utilizar float ni posicionamiento. Es una herramienta potente para alinear y distribuir el espacio entre los elementos de un contenedor.

Conceptos básicos

Flexbox funciona con dos tipos de elementos:

• El contenedor flex (padre)
• Los elementos flex (hijos)

Creación de un contenedor flex

Para crear un contenedor flex, utiliza la propiedad display con el valor flex o inline-flex:

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

Propiedades del contenedor flex

Dirección de los elementos

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (por defecto): de izquierda a derecha
• row-reverse: de derecha a izquierda
• column: de arriba abajo
• column-reverse: de abajo arriba

Salto de línea

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (por defecto): todos los elementos en una sola línea
• wrap: los elementos pasan a la línea siguiente si es necesario
• wrap-reverse: los elementos pasan a la línea anterior si es necesario

Atajo flex-flow

.container {
  flex-flow: row nowrap; /* flex-direction y flex-wrap combinados */
}

Alineación horizontal (justify-content)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (por defecto): elementos alineados al principio
• flex-end: elementos alineados al final
• center: elementos centrados
• space-between: espacio igual entre los elementos
• space-around: espacio igual alrededor de los elementos
• space-evenly: espacio igual entre y alrededor de los elementos

Alineación vertical (align-items)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch (por defecto): estira los elementos para llenar el contenedor
• flex-start: elementos alineados arriba
• flex-end: elementos alineados abajo
• center: elementos centrados verticalmente
• baseline: elementos alineados según su línea de base

Alineación de las líneas (align-content)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Esta propiedad solo tiene efecto cuando hay varias líneas de elementos.

Propiedades de los elementos flex

Orden

.item {
  order: 0; /* por defecto */
}

Cuanto mayor es el valor, más tarde aparece el elemento en el orden.

Flexibilidad (flex-grow, flex-shrink, flex-basis)

.item {
  flex-grow: 0; /* por defecto */
  flex-shrink: 1; /* por defecto */
  flex-basis: auto; /* por defecto */
}

• flex-grow: capacidad de un elemento para crecer
• flex-shrink: capacidad de un elemento para encogerse
• flex-basis: tamaño por defecto de un elemento

Atajo flex

.item {
  flex: 0 1 auto; /* flex-grow, flex-shrink y flex-basis combinados */
}

Alineación individual

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Esta propiedad permite sustituir la alineación definida por align-items para un elemento concreto.

Ejemplo práctico

Aquí tienes un ejemplo de maquetación con Flexbox:

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

Casos de uso habituales

1. Centrado perfecto (horizontal y vertical):

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Navegación responsive:

nav {
  display: flex;
  flex-wrap: wrap;
}

nav a {
  flex: 1 1 100px;
}

3. Cuadrícula flexible:

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

.grid-item {
  flex: 1 1 300px;
  margin: 10px;
}

Conclusión

Flexbox es una herramienta potente para crear maquetaciones flexibles y responsive. Simplifica considerablemente muchos retos de maquetación que eran difíciles de resolver con los métodos tradicionales, como los floats y el posicionamiento.

Para profundizar en tus conocimientos sobre Flexbox, te recomiendo explorar la guía completa de MDN y practicar con herramientas interactivas como Flexbox Froggy.