Tutorial de Flexbox: El Sistema de Maquetación Más Útil

febrero 21, 2026

¿Qué es Flexbox?

Flexbox (Flexible Box) es un sistema de maquetación CSS que te permite distribuir el espacio y alinear elementos de manera fácil y predecible. Es perfecto para crear diseños de una sola dimensión (filas O columnas).

La idea principal:

Tienes un contenedor PADRE (flex container)
Dentro tienes elementos HIJOS (flex items)
El padre decide cómo se colocan los hijos

1. Activar Flexbox

Para empezar a usar Flexbox, solo necesitas una línea mágica:

.padre {
    display: flex;    /* ¡Ya estás usando Flexbox! */
}

2. Las Dos Direcciones Principales

Por defecto: FILA (horizontal)

.padre {
    display: flex;
    flex-direction: row;  /* Valor por defecto */
}

Los hijos se colocan en horizontal (de izquierda a derecha).

Para cambiar a COLUMNA (vertical)

.padre {
    display: flex;
    flex-direction: column;  /* Apila en vertical */
}

Los hijos se colocan en vertical (de arriba a abajo).

3. Propiedades MÁGICAS para alinear

`justify-content`: Alinea en la dirección principal

Valor	Resultado
`flex-start`	Al inicio (por defecto)
`center`	Al centro
`flex-end`	Al final
`space-between`	Espacio entre elementos
`space-around`	Espacio alrededor
`space-evenly`	Espacio igualitario

Ejemplo visual con flex-direction: row:

.padre {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
}

`align-items`: Alinea en la dirección cruzada

Valor	Resultado
`stretch`	Estira (por defecto)
`center`	Al centro
`flex-start`	Arriba/izquierda
`flex-end`	Abajo/derecha

Ejemplo:

.padre {
    display: flex;
    align-items: center;  /* Centra verticalmente */
    height: 300px;        /* Necesita una altura para notarse */
}

4. Truco estrella: Centrar TODO

Con Flexbox, centrar es TRIVIAL:

.padre {
    display: flex;
    justify-content: center;  /* Centra horizontal */
    align-items: center;      /* Centra vertical */
    height: 100vh;            /* Altura completa de la pantalla */
}

¡Así de fácil! 🎯

5. Proyecto Práctico 1: Barra de Navegación

Vamos a crear un menú de navegación típico:

HTML:

<nav class="navbar">
    <div class="logo">MiLogo</div>
    <ul class="menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Productos</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
    <button class="btn">Login</button>
</nav>

CSS:

.navbar {
    display: flex;
    justify-content: space-between;  /* Logo a izq, menú centro, botón der */
    align-items: center;
    padding: 1rem 2rem;
    background-color: #333;
    color: white;
}

.menu {
    display: flex;
    list-style: none;
    gap: 2rem;  /* Espacio entre items del menú */
}

.menu a {
    color: white;
    text-decoration: none;
}

.btn {
    padding: 0.5rem 1rem;
    background-color: #ff6b6b;
    border: none;
    color: white;
    border-radius: 5px;
}

6. Proyecto Práctico 2: Galería de Imágenes

HTML:

<div class="galeria">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

CSS:

.galeria {
    display: flex;
    flex-wrap: wrap;        /* Permite que pasen a la siguiente línea */
    gap: 20px;              /* Espacio entre items */
    justify-content: center; /* Centra las filas */
}

.item {
    width: 200px;
    height: 200px;
    background-color: #4ecdc4;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border-radius: 10px;
}

7. Propiedades para los hijos

`flex-grow`: Crecer

El hijo ocupa el espacio disponible

.hijo {
    flex-grow: 1;  /* Todos los hijos con esto crecen igual */
}

`flex-shrink`: Encogerse

Controla si el hijo puede encogerse

.hijo {
    flex-shrink: 0;  /* No se encoge aunque no quepa */
}

`flex-basis`: Tamaño base

.hijo {
    flex-basis: 200px;  /* Tamaño inicial antes de crecer/encoger */
}

Atajo: `flex: 1`

.hijo {
    flex: 1;  /* Equivalente a: flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

8. Proyecto Práctico 3: Layout de 3 Columnas

HTML:

<div class="layout">
    <aside class="sidebar">Barra lateral</aside>
    <main class="contenido">Contenido principal</main>
    <aside class="sidebar">Barra lateral</aside>
</div>

CSS:

.layout {
    display: flex;
    min-height: 400px;
}

.sidebar {
    width: 200px;
    background-color: #f4f4f4;
    padding: 20px;
}

.contenido {
    flex: 1;  /* Ocupa todo el espacio disponible */
    background-color: white;
    padding: 20px;
}

9. Trucos Útiles

Ordenar elementos

.hijo:first-child {
    order: 2;  /* Orden personalizado (menor número = más a la izquierda) */
}
.hijo:last-child {
    order: 1;  /* Este irá primero */
}

Alinear un hijo específico

.hijo-especial {
    align-self: flex-end;  /* Solo este hijo se alinea abajo */
}

10. Chuleta Visual Rápida

DISPLAY: FLEX
│
├── EN EL PADRE:
│   ├── flex-direction: row / column
│   ├── justify-content: center / space-between / etc
│   ├── align-items: center / stretch / etc
│   ├── flex-wrap: wrap / nowrap
│   └── gap: 20px
│
└── EN LOS HIJOS:
    ├── flex: 1 (crece para llenar espacio)
    ├── align-self: center (alineación individual)
    └── order: 1 (cambiar orden)

Ejercicio para Practicar

Intenta crear este layout tú mismo:

HTML:

<header>Header</header>
<div class="contenedor">
    <nav>Menú</nav>
    <main>Artículo principal</main>
    <aside>Sidebar</aside>
</div>
<footer>Footer</footer>

Pista:

.contenedor {
    display: flex;
}
nav {
    width: 200px;
}
main {
    flex: 1;
}
aside {
    width: 200px;
}

Resumen en 3 Pasos

Activar: display: flex en el padre
Elegir dirección: flex-direction: row o column
Alinear: justify-content y align-items

¡Y eso es todo! Con esto ya puedes hacer el 90% de los layouts que necesitas. ¿Quieres que practiquemos con algún ejemplo específico?

Buscar este blog

css-grid