Flexbox

El problema que resuelve Flexbox

Con lo que viste hasta ahora, centrar algo horizontalmente y verticalmente dentro de una caja, o repartir varios elementos en una fila con espacio parejo entre ellos, es sorprendentemente incómodo — requiere trucos con márgenes, o con posicionamiento absoluto y cálculos a mano.

Flexbox es un sistema de layout pensado exactamente para eso: acomodar elementos en una fila o una columna, controlando cómo se distribuyen y se alinean. Es, con diferencia, la herramienta más usada hoy para maquetar una página.

Se activa con una sola propiedad, en el contenedor:

.contenedor {
    display: flex;
}

Apenas hacés esto, todos los hijos directos de .contenedor se acomodan automáticamente en una fila, uno al lado del otro — sin que hayas tocado nada más.

justify-content: distribuir en el eje principal

justify-content controla cómo se reparten los elementos a lo largo de la fila (el "eje principal" de un contenedor flex en fila):

• flex-start (por defecto): todos juntos al principio.
• center: todos juntos, centrados.
• flex-end: todos juntos al final.
• space-between: el primero pegado al principio, el último pegado al final, y el resto del espacio repartido parejo entre medio.
• space-around: espacio parejo alrededor de cada elemento.

.contenedor {
    display: flex;
    justify-content: space-between;
}

align-items: alinear en el eje transversal

Mientras justify-content reparte a lo largo de la fila, align-items controla la alineación en la otra dirección (vertical, en un contenedor flex en fila) — muy útil para centrar cosas verticalmente, algo que sin flexbox era realmente incómodo de lograr.

• stretch (por defecto): todos los elementos se estiran para ocupar toda la altura del contenedor.
• flex-start: todos arriba.
• center: todos centrados verticalmente.
• flex-end: todos abajo.

.contenedor {
    display: flex;
    align-items: center;
    height: 100px;
}

Con justify-content: center y align-items: center juntos, se centra cualquier cosa horizontal Y verticalmente — el problema clásico que sin flexbox necesitaba trucos.

flex-direction: cambiar de fila a columna

Por defecto, un contenedor flex acomoda en fila (row). Con flex-direction: column, lo mismo se acomoda en columna — y justify-content/align-items se comportan igual, solo que ahora "a lo largo" es verticalmente y "transversal" es horizontalmente.

.contenedor {
    display: flex;
    flex-direction: column;
}

Esto es útil, por ejemplo, para armar una tarjeta donde el título, la imagen y el texto se apilan verticalmente pero siguen queriendo centrado horizontal.