Flexbox en CSS: display flex, justify-content, align-items, gap y dirección

Hasta ahora aprendimos a seleccionar elementos, trabajar con el modelo de caja y controlar tipografías, colores, fondos y unidades. El siguiente paso es aprender a distribuir y alinear elementos de forma cómoda.

Para eso existe Flexbox, uno de los sistemas de layout más utilizados en CSS.

¿Qué problema resuelve Flexbox?

Antes de Flexbox, tareas tan simples como centrar elementos verticalmente o distribuir varios bloques en una misma fila podían resultar bastante incómodas.

Flexbox permite organizar elementos dentro de un contenedor de forma flexible.

display: flex

Para activar Flexbox utilizamos:

.contenedor {
    display: flex;
}

El elemento con display: flex pasa a ser el contenedor flex. Sus hijos directos se convierten en flex items.

HTML:

<div class="contenedor">
    <div>Elemento 1</div>
    <div>Elemento 2</div>
    <div>Elemento 3</div>
</div>

CSS:

.contenedor {
    display: flex;
}

Por defecto, los elementos se colocan en una fila.

Eje principal y eje cruzado

Flexbox trabaja con dos ejes:

• main axis: eje principal;
• cross axis: eje cruzado.

Con la dirección por defecto:

main axis  → horizontal
cross axis → vertical

Pero esto puede cambiar según flex-direction.

flex-direction

Controla la dirección de los elementos.

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

Valores principales:

row
row-reverse
column
column-reverse

row

Los elementos se distribuyen de izquierda a derecha.

column

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

Los elementos se apilan verticalmente.

justify-content

justify-content alinea los elementos sobre el eje principal.

.contenedor {
    display: flex;
    justify-content: center;
}

Valores frecuentes:

flex-start
center
flex-end
space-between
space-around
space-evenly

space-between

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

Distribuye el espacio libre entre los elementos.

space-around

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

Agrega espacio alrededor de cada elemento.

space-evenly

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

Distribuye espacios iguales entre elementos y bordes del contenedor.

align-items

align-items trabaja sobre el eje cruzado.

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

Valores comunes:

stretch
flex-start
center
flex-end
baseline

Centrado perfecto con Flexbox

Una de las técnicas más conocidas:

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Esto centra el contenido tanto horizontal como verticalmente.

gap

gap permite agregar espacio entre los elementos flex.

.contenedor {
    display: flex;
    gap: 20px;
}

Es preferible a agregar márgenes manuales entre elementos cuando queremos controlar simplemente la separación.

flex-wrap

Por defecto, Flexbox intenta mantener todos los elementos en una misma línea.

Con flex-wrap podemos permitir que pasen a otra fila.

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

Ejemplo con tarjetas

HTML:

<section class="cursos">

    <article class="tarjeta">
        <h2>HTML</h2>
        <p>Estructura de páginas web.</p>
    </article>

    <article class="tarjeta">
        <h2>CSS</h2>
        <p>Diseño y estilos.</p>
    </article>

    <article class="tarjeta">
        <h2>JavaScript</h2>
        <p>Interacción y comportamiento.</p>
    </article>

</section>

CSS:

.cursos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.tarjeta {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

align-content

align-content trabaja cuando existen varias líneas de elementos flex.

.contenedor {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

No debe confundirse con align-items.

align-items alinea elementos dentro de una línea; align-content distribuye las líneas completas cuando hay espacio disponible.

Propiedades de los elementos hijos

Hasta ahora vimos propiedades del contenedor. Flexbox también ofrece propiedades para los elementos hijos.

flex-grow

Define cuánto puede crecer un elemento respecto de los demás.

.item {
    flex-grow: 1;
}

Si todos tienen flex-grow: 1, compartirán el espacio disponible.

flex-shrink

Controla cuánto puede reducirse un elemento cuando no hay suficiente espacio.

.item {
    flex-shrink: 1;
}

flex-basis

Define el tamaño base de un elemento antes de distribuir el espacio restante.

.item {
    flex-basis: 250px;
}

La propiedad flex

Podemos combinar grow, shrink y basis:

.item {
    flex: 1 1 250px;
}

Esto significa:

flex-grow:   1
flex-shrink: 1
flex-basis:  250px

Un patrón muy útil para tarjetas

.tarjeta {
    flex: 1 1 280px;
}

Las tarjetas intentarán comenzar con unos 280px, podrán crecer y también reducirse cuando sea necesario.

align-self

Permite modificar la alineación de un elemento concreto.

.especial {
    align-self: flex-end;
}

Esto sobrescribe el comportamiento definido por align-items para ese elemento.

order

Flexbox también permite modificar visualmente el orden.

.destacado {
    order: -1;
}

Sin embargo, conviene usar order con cuidado porque el orden visual puede diferir del orden del HTML, lo que puede afectar la navegación y accesibilidad.

Ejemplo de menú de navegación

HTML:

<nav class="menu">

    <a href="#">Inicio</a>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>

</nav>

CSS:

.menu {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
}

.menu a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

Ejemplo de cabecera

HTML:

<header class="cabecera">

    <div class="logo">
        Club Programador
    </div>

    <nav>
        <a href="#">Inicio</a>
        <a href="#">Cursos</a>
        <a href="#">Contacto</a>
    </nav>

</header>

CSS:

.cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.cabecera nav {
    display: flex;
    gap: 1.5rem;
}

Flexbox y diseño responsive

Flexbox resulta especialmente útil para crear componentes que se adapten a distintos tamaños de pantalla.

Por ejemplo:

.cursos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.tarjeta {
    flex: 1 1 280px;
}

Las tarjetas pueden acomodarse automáticamente en varias filas según el espacio disponible.

Errores comunes

• aplicar propiedades flex al elemento equivocado;
• confundir eje principal con eje cruzado;
• confundir justify-content con align-items;
• olvidar flex-wrap cuando hay muchos elementos;
• usar márgenes para separar items cuando gap es suficiente;
• fijar demasiados anchos rígidos;
• usar order sin considerar accesibilidad;
• confundir align-items con align-content.

Ejercicio para practicar

Partiendo de este HTML:

<section class="equipo">

    <article class="persona">
        <h2>Ana</h2>
        <p>Frontend</p>
    </article>

    <article class="persona">
        <h2>Luis</h2>
        <p>Backend</p>
    </article>

    <article class="persona">
        <h2>María</h2>
        <p>Diseño</p>
    </article>

</section>

Intentá:

• mostrar las tarjetas en una fila;
• agregar espacio con gap;
• permitir varias filas con flex-wrap;
• usar flex: 1 1 250px;
• centrar el contenido de cada tarjeta;
• probar diferentes valores de justify-content y align-items.

Qué aprendimos

• display: flex;
• eje principal y eje cruzado;
• flex-direction;
• justify-content;
• align-items;
• align-content;
• gap;
• flex-wrap;
• flex-grow;
• flex-shrink;
• flex-basis;
• flex;
• align-self;
• order.

Seguí aprendiendo CSS

La guía anterior es:

Tipografías, colores, fondos y unidades CSS: guía práctica

El próximo paso es aprender CSS Grid, otra herramienta fundamental para construir layouts de filas y columnas:

CSS Grid: filas, columnas, gap, fr, repeat y minmax paso a paso →

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal