Módulo 10: Flexbox

Objetivos del módulo

  • Entender qué problema resuelve Flexbox y cuándo usarlo
  • Distinguir entre contenedor flex e ítems flex y sus propiedades
  • Comprender el eje principal y el eje transversal
  • Controlar dirección, salto de línea y alineación de los ítems
  • Separar elementos con gap
  • Dominar flex-grow, flex-shrink, flex-basis y la abreviada flex
  • Resolver los patrones de maquetación más habituales con Flexbox
  • Reconocer y corregir los errores más comunes

1. ¿Qué es Flexbox?

Flexbox (Flexible Box Layout) es un sistema de maquetación pensado para distribuir elementos en una dimensión: en una fila o en una columna. Reparte el espacio disponible, alinea y reordena los elementos, y se adapta automáticamente cuando cambia el tamaño del contenedor.

📘 Concepto: Imagina una estantería con libros. Flexbox te permite decidir si los libros van juntos a la izquierda, centrados o repartidos por todo el estante; si se alinean por arriba, por abajo o por el centro; y si alguno debe “estirarse” para ocupar el hueco que sobra. Si no caben, puedes hacer que pasen a un segundo estante.

Antes de Flexbox, cosas tan comunes como centrar verticalmente un elemento o crear columnas de igual altura requerían trucos con float, tablas o cálculos manuales. Hoy se hacen con dos o tres líneas.

Usa Flexbox para… Usa Grid (módulo 11) para…
Una fila o una columna de elementos Rejillas con filas y columnas a la vez
Barras de navegación, botones, formularios en línea Maquetación general de la página
Alinear elementos dentro de un componente Galerías y paneles con estructura fija
Cuando el contenido dicta el tamaño Cuando la estructura dicta el tamaño

2. Contenedor e ítems

Flexbox trabaja con dos niveles:

  • Contenedor flex: el elemento al que le das display: flex.
  • Ítems flex: sus hijos directos (solo los hijos, no los nietos).
<div class="contenedor">        <!-- contenedor flex -->
    <div class="item">1</div>   <!-- ítem flex -->
    <div class="item">2</div>   <!-- ítem flex -->
    <div class="item">3         <!-- ítem flex -->
        <span>Soy un nieto: NO soy ítem flex</span>
    </div>
</div>

.contenedor {
    display: flex;               /* ¡con esto los hijos ya se colocan en fila! */
    border: 2px dashed #94a3b8;
    padding: 1rem;
}

.item {
    padding: 1rem;
    background-color: #bfdbfe;
    border: 1px solid #2563eb;
}

Solo con display: flex ocurre lo siguiente:

  • Los ítems se colocan en fila, de izquierda a derecha.
  • Cada ítem mide lo que necesita su contenido (no se estira en horizontal).
  • Todos los ítems se estiran en vertical hasta la altura del más alto.
  • Si no caben, encogen antes que saltar de línea.

💡 Consejo: display: inline-flex hace lo mismo, pero el contenedor se comporta como un elemento en línea (ocupa solo el ancho de su contenido). Es útil, por ejemplo, para un botón con icono y texto dentro de un párrafo.

Propiedades de cada nivel

Contenedor (display: flex) Ítems (hijos directos)
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-basis
align-items flex
align-content align-self
gap, row-gap, column-gap  

3. Los ejes: principal y transversal

Todo en Flexbox gira en torno a dos ejes:

  • Eje principal (main axis): la dirección en la que se colocan los ítems. Lo define flex-direction.
  • Eje transversal (cross axis): el perpendicular al principal.
flowchart LR
    subgraph C["Contenedor con flex-direction: row"]
        direction LR
        A["Ítem 1"] --> B["Ítem 2"] --> D["Ítem 3"]
    end
    E["Eje principal: horizontal →<br/>se controla con justify-content"] -.-> C
    F["Eje transversal: vertical ↓<br/>se controla con align-items"] -.-> C

 flex-direction: row                      flex-direction: column

 eje principal ──────────────►            eje transversal ──────►
 ┌───────────────────────────┐ eje        ┌─────────────────────┐ eje
 │ ┌───┐ ┌───┐ ┌───┐         │ trans-     │ ┌─────────────────┐ │ principal
 │ │ 1 │ │ 2 │ │ 3 │         │ versal     │ │        1        │ │    │
 │ └───┘ └───┘ └───┘         │   │        │ ├─────────────────┤ │    │
 │                           │   │        │ │        2        │ │    │
 └───────────────────────────┘   ▼        │ ├─────────────────┤ │    ▼
                                          │ │        3        │ │
                                          │ └─────────────────┘ │
                                          └─────────────────────┘

⚠️ Importante: La regla de oro: justify-content actúa siempre sobre el eje principal y align-items sobre el transversal. Si cambias flex-direction a column, los ejes giran: justify-content pasa a controlar la vertical y align-items la horizontal. Es la fuente número uno de confusión con Flexbox.

4. flex-direction

Define la dirección del eje principal.

.contenedor { display: flex; flex-direction: row; }            /* por defecto: → */
.contenedor { display: flex; flex-direction: row-reverse; }    /* ← (empieza por la derecha) */
.contenedor { display: flex; flex-direction: column; }         /* ↓ */
.contenedor { display: flex; flex-direction: column-reverse; } /* ↑ */
Valor Eje principal Orden visual
row Horizontal 1 2 3 (izquierda a derecha)
row-reverse Horizontal 3 2 1 (empezando por la derecha)
column Vertical 1, 2, 3 de arriba a abajo
column-reverse Vertical 3, 2, 1 de arriba a abajo

⚠️ Importante: row-reverse, column-reverse y order solo cambian el orden visual. Los lectores de pantalla y la navegación con tabulador siguen el orden del HTML. Si el orden importa para entender el contenido, cámbialo en el HTML.

5. flex-wrap y flex-flow

Por defecto (nowrap), los ítems se mantienen en una sola línea aunque tengan que encoger o desbordar. Con wrap, pasan a la línea siguiente cuando no caben.

.etiquetas {
    display: flex;
    flex-wrap: wrap;     /* nowrap (defecto) | wrap | wrap-reverse */
    gap: 0.5rem;
}

flex-flow es la abreviada de flex-direction + flex-wrap:

.galeria {
    display: flex;
    flex-flow: row wrap;   /* = flex-direction: row; flex-wrap: wrap; */
}

💻 Ejemplo: Una lista de 20 etiquetas (#html, #css, #flexbox…) en un contenedor estrecho: sin wrap, se aplastan o desbordan por la derecha; con wrap, ocupan varias líneas como las palabras de un texto.

6. justify-content: alineación en el eje principal

Reparte el espacio sobrante en el eje principal.

flex-start      [1][2][3]__________________
flex-end        __________________[1][2][3]
center          _________[1][2][3]_________
space-between   [1]__________[2]__________[3]
space-around    ___[1]______[2]______[3]___
space-evenly    ______[1]_____[2]_____[3]______
Valor Efecto
flex-start Al inicio (por defecto; también vale start)
flex-end Al final (también end)
center Centrados
space-between El primero al inicio, el último al final, espacio igual entre ellos
space-around Espacio igual alrededor de cada ítem (en los extremos, la mitad)
space-evenly Espacio exactamente igual entre ítems y en los extremos 
.barra {
    display: flex;
    justify-content: space-between;   /* logo a la izquierda, menú a la derecha */
}

💡 Consejo: justify-content solo tiene efecto si sobra espacio. Si los ítems tienen flex-grow y ocupan todo el contenedor, no hay nada que repartir.

7. align-items: alineación en el eje transversal

Alinea los ítems dentro de su línea en el eje transversal.

 (fila de ítems de distinta altura dentro de un contenedor alto)

   stretch        flex-start      flex-end        center
 ┌───────────┐   ┌───────────┐   ┌───────────┐   ┌───────────┐
 │ ┌─┐┌─┐┌─┐ │   │ ┌─┐┌─┐┌─┐ │   │           │   │           │
 │ │1││2││3│ │   │ │1││2││3│ │   │      ┌─┐  │   │ ┌─┐┌─┐┌─┐ │
 │ │ ││ ││ │ │   │ └─┘│ │└─┘ │   │ ┌─┐┌─┐│3│ │   │ │1││2││3│ │
 │ │ ││ ││ │ │   │    └─┘    │   │ │1││2││ │ │   │ └─┘│ │└─┘ │
 │ └─┘└─┘└─┘ │   │           │   │ └─┘└─┘└─┘ │   │    └─┘    │
 └───────────┘   └───────────┘   └───────────┘   └───────────┘
  todos igual     pegados          pegados         centrados
  de altos        arriba           abajo
Valor Efecto
stretch Se estiran para ocupar toda la altura de la línea (por defecto)
flex-start Pegados al inicio del eje transversal (arriba en una fila)
flex-end Pegados al final (abajo en una fila)
center Centrados
baseline Alineados por la línea base del texto (útil con textos de distintos tamaños) 
.cabecera {
    display: flex;
    align-items: center;   /* logo, menú y botón centrados verticalmente */
    min-height: 4rem;
}

⚠️ Importante: stretch solo estira si el ítem no tiene una altura fija. Si le pones height: 100px, se respeta. Y para que align-items tenga un efecto visible, el contenedor tiene que ser más alto que los ítems.

8. align-content: varias líneas

Cuando hay varias líneas (con flex-wrap: wrap), align-content reparte el espacio sobrante entre las líneas en el eje transversal. Acepta los mismos valores que justify-content más stretch.

.galeria {
    display: flex;
    flex-wrap: wrap;
    height: 600px;
    align-content: flex-start;   /* las líneas, juntas arriba, en vez de repartidas */
}
Propiedad Alinea… ¿Cuándo actúa?
align-items Los ítems dentro de cada línea Siempre
align-content Las líneas dentro del contenedor Solo con varias líneas (wrap) y espacio sobrante

9. gap: el espacio entre ítems

gap crea separación solo entre los ítems, nunca en los extremos. Es mucho más cómodo que usar márgenes (que habría que quitar en el primero o el último).

.botones {
    display: flex;
    gap: 1rem;            /* 1rem entre ítems, en ambas direcciones */
}

.galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1rem;       /* row-gap (entre filas) | column-gap (entre columnas) */
}

💡 Consejo: Antes de gap se usaban márgenes en los ítems y selectores como .item:not(:last-child). Hoy gap funciona en Flexbox en todos los navegadores actuales: úsalo siempre.

10. Propiedades de los ítems

10.1. order

Cambia el orden visual de un ítem. Por defecto todos tienen order: 0; los ítems se ordenan de menor a mayor.

.destacado { order: -1; }   /* pasa delante de todos */
.al-final  { order: 1; }    /* pasa detrás de todos */

10.2. flex-basis: el tamaño de partida

Es el tamaño inicial del ítem en el eje principal, antes de repartir el espacio sobrante o el que falta. Con auto (por defecto) usa su width (o height en columna), y si no tiene, el tamaño de su contenido.

.item { flex-basis: 200px; }   /* parte de 200px y luego crece o encoge según las otras reglas */

10.3. flex-grow: crecer

Indica qué proporción del espacio sobrante se lleva el ítem. Por defecto es 0 (no crece).

.a { flex-grow: 1; }
.b { flex-grow: 2; }
.c { flex-grow: 1; }

💻 Ejemplo: Contenedor de 1000px con tres ítems de flex-basis: 100px. Ocupan 300px, así que sobran 700px. Se reparten en 1 + 2 + 1 = 4 partes de 175px: .a mide 100 + 175 = 275px, .b mide 100 + 350 = 450px y .c mide 275px. Fíjate en que .b no mide el doble que .a: recibe el doble del espacio sobrante.

10.4. flex-shrink: encoger

Indica cuánto encoge el ítem cuando falta espacio. Por defecto es 1 (todos encogen por igual, en proporción a su tamaño). Con 0, el ítem no encoge nunca.

.logo   { flex-shrink: 0; }   /* el logo nunca se aplasta */
.buscar { flex-shrink: 1; }   /* el buscador sí puede encoger */

10.5. La abreviada flex

flex: grow shrink basis. Es la forma recomendada, porque establece valores coherentes para las tres:

Valor Equivale a Significado
flex: initial 0 1 auto Por defecto: no crece, puede encoger, tamaño según contenido
flex: auto 1 1 auto Crece y encoge, partiendo del tamaño de su contenido
flex: none 0 0 auto Rígido: ni crece ni encoge
flex: 1 1 1 0% Crece y encoge partiendo de cero: todos los flex: 1 acaban iguales
flex: 2 2 1 0% El doble que un flex: 1
flex: 1 1 250px — Parte de 250px, crece y encoge
flex: 0 0 300px — Exactamente 300px, siempre

📘 Concepto: La diferencia entre flex: 1 y flex: auto es sutil pero importante. Con flex: 1 la base es 0, así que todo el espacio se reparte a partes iguales: columnas idénticas aunque su contenido sea distinto. Con flex: auto primero cada ítem ocupa su contenido y luego se reparte solo lo que sobra: los ítems con más texto acaban más anchos.

<div class="columnas">
    <div class="col">Poco texto</div>
    <div class="col">Bastante más texto en esta columna para ver la diferencia</div>
    <div class="col">Medio texto aquí</div>
</div>

.columnas { display: flex; gap: 1rem; }
.col      { flex: 1; }   /* tres columnas idénticas; prueba a cambiarlo por flex: auto */

10.6. align-self

Sobrescribe align-items para un ítem concreto:

.contenedor { display: flex; align-items: flex-start; }
.item-especial { align-self: flex-end; }   /* solo este se va abajo */

10.7. El truco del margin: auto

En un contenedor flex, un margen auto absorbe todo el espacio sobrante en esa dirección. Es la forma más elegante de separar grupos de ítems:

.menu { display: flex; gap: 1rem; }
.menu .cerrar-sesion { margin-left: auto; }   /* este y los siguientes, empujados a la derecha */

A diferencia del flujo normal, en Flexbox margin: auto sí centra verticalmente: un único hijo con margin: auto queda centrado en ambos ejes.

11. Patrones prácticos

11.1. Barra de navegación 

<header class="nav">
    <a href="/" class="nav__logo">MiMarca</a>
    <nav>
        <ul class="nav__lista">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <a href="#" class="nav__boton">Acceder</a>
</header>

.nav {
    display: flex;
    align-items: center;          /* todo centrado verticalmente */
    gap: 2rem;
    padding: 1rem 2rem;
    background-color: #1e293b;
}

.nav__logo {
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
}

.nav__lista {
    display: flex;                /* ¡un contenedor flex dentro de otro! */
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__lista a {
    color: #cbd5e1;
    text-decoration: none;
}

.nav__boton {
    margin-left: auto;            /* empuja el botón al extremo derecho */
    padding: 0.5rem 1rem;
    background-color: #3b82f6;
    color: white;
    border-radius: 6px;
    text-decoration: none;
}

💡 Consejo: Los contenedores flex se pueden anidar sin límite: el <header> es flex para colocar logo, menú y botón, y la <ul> es otro flex para colocar sus enlaces.

11.2. Centrado perfecto

El “santo grial” histórico de CSS, en tres líneas:

.pantalla-completa {
    display: flex;
    justify-content: center;   /* centrado horizontal (eje principal) */
    align-items: center;       /* centrado vertical (eje transversal) */
    min-height: 100dvh;
}

11.3. Tarjetas de igual altura con botón abajo

Las tarjetas de una fila ya tienen la misma altura gracias a align-items: stretch. El reto es que el botón quede siempre abajo, aunque el texto de cada tarjeta tenga distinta longitud:

<div class="tarjetas">
    <article class="tarjeta">
        <h3>Básico</h3>
        <p>Ideal para empezar.</p>
        <a href="#" class="tarjeta__boton">Elegir</a>
    </article>
    <article class="tarjeta">
        <h3>Pro</h3>
        <p>Todo lo del plan básico, más soporte prioritario, informes avanzados y copias de seguridad diarias.</p>
        <a href="#" class="tarjeta__boton">Elegir</a>
    </article>
    <article class="tarjeta">
        <h3>Empresa</h3>
        <p>Para equipos grandes.</p>
        <a href="#" class="tarjeta__boton">Elegir</a>
    </article>
</div>

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

.tarjeta {
    flex: 1 1 250px;              /* base de 250px; crecen para llenar la fila */
    display: flex;                /* cada tarjeta es, a su vez, un flex en columna */
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.tarjeta__boton {
    margin-top: auto;             /* ocupa todo el espacio libre por encima: el botón baja */
    align-self: flex-start;       /* el botón no se estira a todo el ancho */
}

Si una página tiene poco contenido, el pie queda flotando a media pantalla. Solución:

<body>
    <header>...</header>
    <main>Poco contenido</main>
    <footer>© 2026 Mi web</footer>
</body>

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;   /* el body ocupa al menos toda la pantalla */
    margin: 0;
}

main {
    flex: 1;              /* el contenido principal crece y empuja el footer abajo */
}

11.5. Media object

Imagen a un lado y texto al otro: comentarios, notificaciones, testimonios…

<div class="media">
    <img class="media__imagen" src="avatar.jpg" alt="Foto de Laura">
    <div class="media__cuerpo">
        <h4>Laura Martín</h4>
        <p>Un curso muy claro. Por fin entiendo Flexbox.</p>
    </div>
</div>

.media {
    display: flex;
    align-items: flex-start;   /* la imagen no se estira a la altura del texto */
    gap: 1rem;
}

.media__imagen {
    flex-shrink: 0;            /* la imagen nunca se aplasta */
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.media__cuerpo {
    flex: 1;                   /* el texto ocupa el resto */
    min-width: 0;              /* permite que encoja (ver errores comunes) */
}

11.6. Holy grail simplificado

El clásico diseño de cabecera, pie y tres columnas (menú, contenido y barra lateral), que en pantallas estrechas se apilan:

<div class="pagina">
    <header class="pagina__cabecera">Cabecera</header>
    <div class="pagina__centro">
        <nav class="pagina__menu">Menú</nav>
        <main class="pagina__contenido">Contenido principal</main>
        <aside class="pagina__lateral">Lateral</aside>
    </div>
    <footer class="pagina__pie">Pie</footer>
</div>

.pagina {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.pagina__centro {
    flex: 1;                     /* ocupa el alto sobrante: pie siempre abajo */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.pagina__menu,
.pagina__lateral {
    flex: 1 1 180px;             /* columnas laterales: base 180px */
}

.pagina__contenido {
    flex: 3 1 400px;             /* el contenido crece el triple; base 400px */
}

📘 Concepto: Fíjate en que no hay ninguna media query: cuando el ancho no alcanza para las bases (180 + 400 + 180 + huecos), los ítems saltan de línea automáticamente gracias a flex-wrap. Para un control más preciso de este tipo de maquetación general, Grid (módulo 11) es más adecuado.

11.7. Campo de búsqueda con botón 

.buscador { display: flex; }
.buscador input  { flex: 1; min-width: 0; }   /* el input ocupa todo el espacio */
.buscador button { flex-shrink: 0; }          /* el botón mantiene su tamaño */

12. Errores comunes

Problema Causa Solución
justify-content y align-items hacen lo contrario de lo esperado Has cambiado flex-direction a column y los ejes han girado Recuerda: justify = eje principal, align = transversal
Las propiedades flex no hacen nada Las has puesto en el ítem en lugar del contenedor (o viceversa), o en un nieto display: flex va en el padre directo
Un texto largo o una URL desborda el ítem Los ítems flex tienen min-width: auto: no encogen por debajo de su contenido min-width: 0 en el ítem (u overflow: hidden)
Las imágenes se deforman en una fila flex align-items: stretch estira la imagen en altura align-items: flex-start o align-self: center en la imagen
align-items: center no centra verticalmente El contenedor solo mide lo que su contenido Dale altura: min-height
Columnas de width: 33.33% + gap desbordan El gap se suma a los porcentajes Usa flex: 1 o flex-basis con calc()
flex-grow: 1 no deja columnas iguales La base es auto (el contenido) Usa flex: 1 (base 0)
Una rejilla de tarjetas con la última fila descuadrada Flexbox es unidimensional: cada fila reparte por su cuenta Usa Grid para rejillas

💻 Ejemplo: El error del min-width: auto en acción. En el media object, si el texto contiene una URL muy larga sin espacios, el cuerpo se niega a encoger y empuja el diseño fuera de la pantalla. Añadiendo min-width: 0 al cuerpo (y overflow-wrap: break-word), la URL se parte y todo encaja.

Depurar Flexbox con DevTools

En el panel Elements de Chrome, Edge y Firefox, junto a cada contenedor flex aparece una insignia flex. Al pulsarla, el navegador dibuja sobre la página los ítems, los huecos y el espacio libre. Además, en el panel Styles, junto a display: flex hay un icono que abre un editor visual con botones para probar flex-direction, justify-content, align-items y align-content sin escribir código.

13. Ejercicios

Ejercicio 1: Explorador de alineaciones

Crea un contenedor de 600×300px con 4 cajas de tamaños distintos. Haz 6 copias del contenedor y aplica a cada una un valor de justify-content distinto. Después repítelo con align-items (incluido baseline, con textos de tamaños distintos). Finalmente cambia flex-direction a column y anota qué propiedad controla ahora cada eje.

Ejercicio 2: Barra de navegación completa

Maqueta una cabecera con: logo a la izquierda, menú de 5 enlaces en el centro, y a la derecha un icono de carrito y un botón “Acceder”. Todo centrado verticalmente, con gap y usando margin-left: auto para separar los grupos. El logo no debe encoger nunca.

Ejercicio 3: Tabla de precios

Crea tres tarjetas de precios (Básico, Pro, Empresa) de igual altura, con distinta cantidad de características en cada una y el botón de compra siempre alineado abajo. La tarjeta central debe destacar con un borde de color y una insignia “Más popular” posicionada en su borde superior. Con flex-wrap y flex: 1 1 260px, deben apilarse en móvil sin media queries.

Ejercicio 4: Calcula el reparto

Un contenedor de 900px tiene tres ítems: A (flex: 1 1 100px), B (flex: 2 1 200px) y C (flex: 0 0 150px), con gap: 0. Calcula a mano el ancho final de cada ítem y compruébalo en DevTools. Repite el cálculo con un contenedor de 400px (pista: ahora falta espacio y entra en juego flex-shrink, en proporción a la base de cada ítem).

Crea una página con cabecera, contenido muy corto y pie. Consigue que el pie quede siempre en la parte inferior de la ventana usando Flexbox en el body. Después añade mucho contenido y comprueba que el pie se desplaza con normalidad.

Ejercicio 6: Lista de comentarios

Maqueta una lista de 4 comentarios con el patrón media object: avatar circular a la izquierda (que no encoge), nombre y fecha en una misma línea (nombre a la izquierda, fecha a la derecha con justify-content: space-between) y el texto debajo. Uno de los comentarios debe contener una URL muy larga: resuelve el desbordamiento.

Ejercicio 7: Holy grail

Maqueta el diseño holy grail de la sección 11.6 con colores distintos para cada zona. Haz que el menú lateral izquierdo aparezca después del contenido en el HTML (mejor para accesibilidad y SEO) pero se muestre a la izquierda con order. Redimensiona la ventana y observa cómo se reorganiza.

Resumen

Concepto Sintaxis / idea clave
Activar Flexbox display: flex (o inline-flex) en el padre
Ejes Principal (flex-direction) y transversal (perpendicular)
Dirección flex-direction: row \| row-reverse \| column \| column-reverse
Salto de línea flex-wrap: wrap; abreviada flex-flow: row wrap
Eje principal justify-content: flex-start \| center \| space-between \| space-evenly...
Eje transversal align-items: stretch \| center \| flex-start \| flex-end \| baseline
Varias líneas align-content
Separación gap: fila columna
Crecer / encoger flex-grow, flex-shrink, base flex-basis
Abreviada flex: 1 (iguales), flex: auto, flex: none, flex: 1 1 250px
Un ítem concreto align-self, order
Empujar margin-left: auto / margin-top: auto en un ítem
Centrado perfecto display: flex; justify-content: center; align-items: center;
Desbordamiento de texto min-width: 0 en el ítem
Navegación  
← Módulo anterior: Modelo de cajas y posicionamiento Siguiente módulo: CSS Grid →