Maquetación CSS con flexbox y cuadrículas

Una página ya tiene una disposición antes de que añadas flexbox o cuadrículas. El flujo normal coloca las cajas en el orden del HTML. En texto horizontal en español, los bloques se apilan hacia abajo y el contenido en línea va de izquierda a derecha y pasa a la siguiente línea cuando esta se llena.

Los bloques ocupan una línea

Los párrafos, encabezados, divisiones y secciones son cajas de bloque de forma predeterminada. Un bloque con width: auto llena el ancho disponible de su contenedor y crece en altura con su contenido. Establecer su ancho no hace que el siguiente bloque se coloque en la misma línea.

<p>Read the <a href="/guide">setup guide</a> first.</p>
<p>Then install it.</p>

Los párrafos empiezan en líneas separadas. El enlace es una caja en línea dentro del primer párrafo. Incluso si el primer párrafo solo tiene 300px de ancho, el segundo sigue empezando debajo.

Las cajas en línea siguen el texto

Un <span>, <a>, <strong> o <em> normalmente ocupa solo el ancho de su texto. Una caja en línea no reemplazada ignora width y height. Por tanto, añadir a { width: 200px; } no hace que el enlace mida 200px de ancho.

El relleno, los bordes y los márgenes horizontales apartan el texto adyacente. El relleno y los bordes verticales se pintan, pero no separan más las líneas circundantes; un fondo grande puede superponerse a la línea de arriba o de abajo. Los márgenes verticales no tienen efecto. Una imagen es un elemento reemplazado: está en línea de forma predeterminada, pero width y height sí se le aplican.

Los márgenes verticales pueden combinarse

En el flujo normal, los márgenes verticales de cajas de bloque que se tocan pueden colapsar en una sola separación. Un párrafo con margin-bottom: 24px seguido de un encabezado con margin-top: 32px deja 32px entre ellos. Prevalece el margen positivo mayor; la separación no es de 56px. Con un margen positivo de 24px y uno de −10px, el resultado es 14px. Los márgenes horizontales permanecen separados.

El margen superior de un primer hijo también puede colapsar con el margen superior de su padre cuando no los separa ningún borde, relleno o contenido en línea. Un margen superior de 20px de un encabezado puede desplazar hacia abajo toda una cabecera sin relleno, sin dejar espacio dentro de ella. Usa relleno superior para crear espacio interior, añade un borde o asigna al padre display: flow-root. El margen inferior de un último hijo también puede colapsar con el margen inferior de su padre.

Los elementos flex y de cuadrícula no colapsan sus márgenes entre sí. Si cambias un padre del flujo normal a flexbox, ahora los mismos dos márgenes positivos pueden sumarse. Las cajas flotantes y con posicionamiento absoluto también mantienen sus márgenes separados.

Las direcciones siguen el modo de escritura

La dirección de bloque indica hacia dónde van los bloques sucesivos; la dirección en línea indica hacia dónde avanza el texto. El árabe y el hebreo también usan líneas horizontales, pero su dirección en línea va de derecha a izquierda. Las propiedades lógicas siguen estas direcciones: margin-inline-start: 16px da un margen izquierdo en español y uno derecho en árabe. padding-block establece el relleno a lo largo de la dirección de bloque.

La propiedad display controla la relación de una caja con su padre y la disposición de sus hijos. Son elecciones independientes. Un contenedor flex puede ocupar una línea completa mientras dispone sus propios hijos uno al lado de otro.

Interpreta display de fuera hacia dentro

El tipo de visualización exterior es de bloque o en línea. El tipo de visualización interior describe la disposición dentro de la caja, como flujo, flex o cuadrícula.

La sintaxis moderna de dos palabras clave hace visible la distinción: display: inline flex significa lo mismo que inline-flex. display: block flow-root significa lo mismo que flow-root. Un solo valor como grid proporciona un tipo exterior de bloque de forma predeterminada.

Haz que una caja en línea acepte un tamaño

nav a {
  display: inline-block;
  padding: 12px 16px;
}

Cada enlace sigue situado en una línea de texto, pero ahora acepta ancho, alto y márgenes verticales. Su relleno vertical crea espacio en la disposición de la línea en lugar de limitarse a pintarse sobre las líneas cercanas. Esto da al enlace un área de activación más grande.

Los espacios en blanco entre elementos de bloque en línea en el HTML aparecen como un pequeño espacio entre las cajas. Si necesitas una fila controlada con una separación exacta, flexbox la proporciona directamente.

Cambiar display no cambia el significado del elemento HTML. Una división con estilo en línea sigue siendo un contenedor genérico. Elige una lista, enlace o botón según su finalidad y después aplica estilo a su caja.

Oculta una caja con el efecto adecuado

Un mensaje de error oculto con display: none no deja ningún espacio. Al mostrarlo, desplaza el contenido posterior hacia abajo. Usar visibility: hidden reserva el espacio, por lo que mostrar el mensaje no tiene por qué mover nada. display: none también impide el foco del teclado y elimina el contenido oculto de lo que anuncian los lectores de pantalla. Una clase de ocultación visual cumple otra función: mantener el texto disponible para los lectores de pantalla mientras lo oculta visualmente.

Hijos y regiones independientes

Con ul { display: grid; }, los elementos de lista se convierten en elementos de cuadrícula. Los enlaces dentro de esos elementos de lista permanecen en la disposición de su propio padre. Para disponer esos enlaces, da al elemento de lista su propia disposición o usa una subcuadrícula cuando se necesiten pistas compartidas.

display: contents elimina la caja del propio contenedor para que sus hijos participen en la disposición circundante. El comportamiento de accesibilidad de los navegadores también puede eliminar el rol del contenedor, así que evita usarlo en controles, listas y tablas con significado.

display: flow-root crea un contexto de formato de bloque, una región de flujo independiente. Contiene a los hijos flotantes e impide que los márgenes del padre colapsen con los de sus hijos. Consigue esos efectos sin añadir recortes ni barras de desplazamiento.

Un retrato en un artículo suele necesitar texto a su lado durante unas líneas y después texto a todo el ancho debajo. Un elemento flotante crea esa forma de flujo del texto. Su función es distinta de la de una barra lateral que permanece en una columna separada.

Coloca una imagen junto al texto que fluye

img.portrait {
  float: left;
  width: 160px;
  margin: 0 16px 8px 0;
}

Coloca la imagen antes de los párrafos que deben rodearla. La imagen se mueve al borde izquierdo de su contenedor. El texto posterior usa el espacio a su derecha, manteniéndose a 16px de distancia horizontalmente y a 8px por debajo de su borde inferior. Una vez que el texto pasa la imagen, las líneas vuelven a ocupar todo el ancho del contenedor. Usa float: right para el borde opuesto y float: none para eliminar la flotación.

Un elemento flotante se retira del flujo normal, pero el contenido en línea cercano sigue rodeándolo. Las propias cajas de bloque posteriores ignoran el elemento flotante: sus fondos y bordes pueden extenderse detrás de él. Ver el fondo de un párrafo debajo de la imagen no significa que su texto no la esté rodeando.

Un elemento flotante se convierte en una caja de nivel de bloque. Por tanto, un <span> flotante puede aceptar ancho y alto. Sin un ancho establecido, una caja de texto flotante se reduce para ajustarse a su contenido; una imagen tiene sus propias dimensiones.

Empieza la siguiente sección debajo de la imagen

Supón que el texto es más corto que el retrato y que el encabezado de una nueva sección empieza a su lado. La propiedad clear controla esa relación:

.next-section {
  clear: both;
}

El encabezado se mueve por debajo de los elementos flotantes anteriores de ambos lados. clear: left lo sitúa solo debajo de los flotantes de la izquierda; clear: right, solo debajo de los de la derecha. Aplicar clear a un encabezado posterior no convierte por sí mismo la imagen anterior de nuevo en un bloque normal.

Haz que el padre contenga sus elementos flotantes

Un padre que solo tiene hijos flotantes no obtiene altura de ellos en el flujo normal. Su fondo y borde pueden parecer colapsados y el contenido siguiente puede subir hasta quedar junto a los elementos flotantes. Haz que el padre los contenga:

.profile {
  display: flow-root;
}

La altura del padre ahora abarca la imagen flotante. Esto es distinto de clear: flow-root cambia la región de flujo del padre, mientras que clear mueve un elemento posterior hacia abajo, por debajo de los flotantes.

Las hojas de estilo antiguas suelen contener una técnica de contención de flotantes: un pseudoelemento ::after con content: "", display: block y clear: both. También puedes encontrar overflow: auto para contener elementos flotantes. Esto puede añadir desplazamiento cuando el contenido es demasiado grande; flow-root expresa directamente la función de contención.

Reconoce disposiciones antiguas de columnas

Antes de flexbox y las cuadrículas, las columnas de página solían hacerse flotantes con anchos porcentuales y reglas de clear. Mantén esas reglas comprendiendo cómo funcionan los elementos flotantes, pero elige flexbox o cuadrículas para columnas nuevas que necesiten tamaño y alineación.

Un hijo directo de un contenedor flex o de cuadrícula sigue esa disposición, por lo que float no tiene efecto en ese elemento. Si una imagen flotante deja de hacer que el texto la rodee después de añadir display: flex a su padre, inspecciona primero la disposición del padre.

El posicionamiento permite que una caja se superponga a otra o se aleje de su ubicación normal. Antes de establecer un desplazamiento, decide si la caja debe conservar su espacio original y qué antepasado debe servirle de referencia.

Estático, relativo y absoluto

Con position: relative; top: 10px; left: 20px, una caja se dibuja 10px hacia abajo y 20px hacia la derecha de su ubicación original. Sus vecinos permanecen donde estaban. El espacio original se conserva, por lo que un desplazamiento grande puede hacer que la caja se superponga a sus vecinos.

Un padre relativo no necesita desplazamientos para servir de referencia a un hijo absoluto. Este es un uso habitual del posicionamiento relativo.

Ancla un distintivo a una tarjeta

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

El distintivo está fuera del flujo normal, por lo que la tarjeta no reserva espacio para él. Sus bordes superior y derecho quedan 8px hacia dentro desde los bordes del relleno de la tarjeta. Deja suficiente espacio en el contenido de la tarjeta para que un título largo no pase por debajo del distintivo.

El bloque contenedor de una caja absoluta suele ser la caja de relleno de su antepasado posicionado más cercano. Un elemento posicionado tiene cualquier valor de position salvo static. Si la tarjeta sigue siendo estática, el distintivo busca más arriba en la cadena de antepasados. Si no hay ningún antepasado que cumpla el requisito, usa el bloque contenedor inicial: un rectángulo del tamaño del área de visualización situado al principio del documento que se desplaza con la página. Un valor de transform, filter o perspective distinto de none en un antepasado también puede establecer esta referencia.

Estira o centra una capa superpuesta

Una caja absoluta con tamaño automático y desplazamientos que no la estiran se reduce para ajustarse a su contenido. Establecer los desplazamientos izquierdo y derecho con un ancho automático hace que llene el espacio entre ellos; el par superior e inferior funciona de forma similar para una altura automática.

.overlay {
  position: absolute;
  inset: 0;
}

inset establece a la vez los desplazamientos superior, derecho, inferior e izquierdo. Con dimensiones automáticas y sin márgenes, esta capa superpuesta llena el bloque contenedor. Un ancho o una altura establecidos cambian el tamaño, así que elimina esos límites cuando la capa deba cubrir toda la caja.

Para centrar un distintivo de tamaño desconocido, usa top: 50%; left: 50%; transform: translate(-50%, -50%). Los desplazamientos mueven su esquina superior izquierda al centro del bloque contenedor. La traslación lo mueve de vuelta la mitad de su propio ancho y altura. Con un ancho y una altura conocidos, inset: 0; margin: auto es otro método de centrado.

Comprueba la referencia de los porcentajes

Un padre con content-box, width: 400px y un relleno horizontal de 20px tiene una caja de relleno de 440px. Por tanto, un hijo absoluto con width: 50% tiene un ancho de contenido de 220px. Medir solo la caja de contenido de 400px del padre da un resultado incorrecto.

Usa posicionamiento absoluto para un distintivo, información emergente o una capa superpuesta. Las columnas de una página necesitan cajas que respondan al tamaño de las demás; flexbox, las cuadrículas y el flujo normal proporcionan esa relación.

Un control para volver arriba y un encabezado de tabla deben permanecer visibles, pero tienen relaciones distintas con la página. El posicionamiento fijo liga un control a una ventana de referencia. El posicionamiento adhesivo mantiene una caja en el flujo y limita su movimiento a su sección.

Fija un control al área de visualización

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

El botón permanece en la esquina inferior derecha de la ventana mientras se desplaza el documento. No ocupa espacio en el flujo normal. Una cabecera fija tampoco reserva espacio y puede cubrir el primer párrafo.

Para una cabecera fija de 64px, body { padding-top: 64px; } deja espacio para el contenido inicial. Establece también html { scroll-padding-top: 64px; } para que los enlaces a secciones no coloquen sus encabezados de destino debajo de la cabecera. Asigna un fondo a la cabecera para que no se vea el texto que se desplaza detrás de ella.

Un valor de transform, filter o perspective distinto de none en un antepasado puede convertirlo en el bloque contenedor del elemento fijo. Entonces el elemento permanece dentro de ese antepasado y puede desplazarse con él hasta salir de la vista. Inspecciona los antepasados cuando un control fijo se mueva inesperadamente con la página.

Haz que un encabezado se adhiera dentro de una sección

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Un encabezado adhesivo ocupa primero su lugar normal. Cuando el desplazamiento lo llevaría por encima del umbral top: 0, permanece en él. No puede ir más allá de su bloque contenedor: el final de su sección acaba empujándolo fuera de la vista. Esto resulta útil para tablas largas y navegación por secciones.

El área de visualización es la referencia habitual de un elemento fijo. El adhesivo usa el antepasado de desplazamiento pertinente más cercano; la página es la referencia cuando no interviene una caja de desplazamiento más cercana.

Diagnostica una caja adhesiva que no se adhiere

Comprueba estas causas en orden:

1. Establece un desplazamiento distinto de auto en el eje en el que debe adherirse, como top: 0 para el desplazamiento vertical. La palabra clave sticky por sí sola no establece ningún umbral.
2. Inspecciona los antepasados en busca de overflow: hidden, auto o scroll. Pueden convertirse en la referencia del elemento adhesivo aunque otra caja sea la que realmente se desplaza.
3. Compara la altura de la caja adhesiva con la de su bloque contenedor. Un contenedor que solo tiene la altura de su encabezado no deja espacio para que este se mueva.

Una barra lateral adhesiva en una cuadrícula también puede estirarse hasta ocupar toda la altura de la fila. align-self: start le permite conservar la altura de su contenido y deja espacio para su recorrido.

Mantén visibles el contenido y el foco

Las barras fijas y adhesivas ocupan parte de la pantalla visible. Al ampliar el texto al 200 %, una barra de navegación puede hacerse mucho más alta. Prueba tanto la navegación con teclado como el desplazamiento. El criterio 2.4.11 de WCAG 2.2, Foco no oculto (mínimo), exige que el contenido añadido por el autor no oculte por completo un elemento con foco. Mantén bajas las barras y proporciona espacio de desplazamiento adecuado alrededor de los destinos.

Cuando las cajas se superponen, el orden de apilamiento determina cuál ves delante. Un z-index mayor puede traer una caja hacia delante, pero solo dentro del grupo en el que se compara ese valor.

Haz que z-index se aplique

z-index funciona en elementos posicionados y en elementos flex o de cuadrícula. Un párrafo estático en el flujo normal lo ignora. Un elemento de cuadrícula estático puede usarlo sin añadir position: relative.

Sin niveles explícitos, las cajas posicionadas se pintan por encima de las cajas normales no posicionadas. Entre cajas comparables del mismo nivel, la que aparece más tarde en el HTML se pinta encima. Los valores positivos, cero y negativos de z-index te dan más control sobre ese orden.

Un contexto se apila como una sola unidad

Un contexto de apilamiento contiene un grupo que el navegador apila como un todo. El nivel de un hijo no puede elevar el grupo por encima de un contexto hermano situado más arriba.

.site-header {
  position: relative;
  z-index: 1;
}
.menu {
  position: absolute;
  z-index: 9999;
}
main {
  position: relative;
  z-index: 2;
}

Aquí .menu está dentro de .site-header, mientras que main es su hermano. Compara primero los grupos exteriores: la cabecera está en el nivel 1 y main en el 2. Main se pinta por encima de toda la cabecera, incluido el menú. Aumentar 9999 solo cambia la posición del menú dentro de la cabecera.

Eleva la propia cabecera, por ejemplo a z-index: 3, o elimina el nivel innecesario de main. Elige el cambio que corresponda al orden previsto de toda la página.

Encuentra qué crea el grupo

El elemento raíz crea un contexto de apilamiento. Otras causas comunes son:

• Una caja relativa o absoluta con un z-index distinto de auto.
• Un elemento flex o de cuadrícula con un z-index distinto de auto.
• Cualquier caja fija o adhesiva.
• Un valor de opacity inferior a 1, o un transform o filter distinto de none.
• isolation: isolate.

Por tanto, un padre con opacity: 0.9 puede atrapar un menú desplegable aunque nadie haya establecido un nivel en ese padre. Recorre los antepasados en las herramientas de desarrollo cuando un número mayor no produzca ninguna diferencia visible. Busca el primer par de grupos hermanos cuyo orden sea incorrecto.

Mantén las decoraciones dentro de un componente

.panel {
  position: relative;
  isolation: isolate;
}
.panel-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
}

isolation: isolate crea un contexto sin cambiar la apariencia del panel. El hijo con nivel negativo se pinta detrás del texto del panel, pero por encima de su fondo. Sin el contexto local, puede quedar detrás del fondo del padre y desaparecer.

Usa una escala compartida pequeña para las capas previstas de la página: por ejemplo, 1 para tarjetas elevadas, 10 para una cabecera adhesiva, 100 para menús desplegables y 1000 para un cuadro de diálogo modal. Las propiedades personalizadas de CSS como --z-dropdown: 100 facilitan el mantenimiento de estas elecciones.

Flexbox organiza un grupo a lo largo de una dirección principal. Es adecuado para enlaces de navegación, barras de herramientas y otros elementos cuyos tamaños proceden de su contenido. Una disposición flex con ajuste puede tener varias líneas, pero cada una comparte su espacio de forma independiente.

Crea el contenedor

.nav {
  display: flex;
}

Los hijos directos de la navegación se convierten en elementos flex. Un enlace dentro de un elemento de lista no es un elemento flex de la navegación salvo que también sea un hijo directo. El texto situado directamente dentro del contenedor forma un elemento flex anónimo.

Los valores predeterminados son una fila, sin ajuste en varias líneas, sin crecimiento y con reducción permitida. Los elementos empiezan en el borde inicial del eje principal. En una fila horizontal, los elementos de altura automática se estiran hasta la altura de la línea, por lo que suelen parecer igual de altos.

Identifica los ejes antes de alinear

El eje principal sigue flex-direction. El eje transversal es perpendicular a él. En texto horizontal en español:

Una fila sigue la dirección en línea, por lo que empieza a la derecha en texto de derecha a izquierda. Una columna sigue la dirección de bloque. Principal y transversal describen funciones, no direcciones horizontal y vertical permanentes.

justify-content actúa en el eje principal. align-items actúa en el eje transversal. Después de cambiar de fila a columna, justify-content: center centra verticalmente, siempre que haya altura libre.

Calcula qué elementos caben

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 200px;
}

Considera cinco tarjetas en un ancho de contenido de 700px. Cada una empieza con 200px y puede crecer o reducirse. Tres tarjetas más dos separaciones necesitan 632px; cuatro más tres separaciones necesitan 848px. Tres caben en la primera línea.

La primera línea comparte 700px menos 32px de separaciones: cada tarjeta pasa a medir unos 222,7px de ancho. Las dos restantes comparten 700px menos una separación de 16px: cada una pasa a medir 342px de ancho. Los elementos de la segunda línea no heredan los anchos de la primera. Usa una cuadrícula cuando las columnas deban alinearse entre filas.

flex-flow: row wrap es una forma abreviada de establecer la dirección y el ajuste en varias líneas. Sin ajuste, flexbox mantiene todos los elementos en una línea y los reduce cuando sus límites de tamaño lo permiten.

Mantén un orden de lectura significativo

order tiene el valor predeterminado 0. Los valores más bajos aparecen primero; order: -1 sitúa un elemento antes que los elementos normales. Las direcciones inversas y order cambian el orden de dibujado, mientras que los lectores de pantalla y el foco normal del teclado siguen el HTML.

Mantén las secuencias importantes en un orden coherente en el HTML. Cambiar el orden visual puede hacer que una persona que use el teclado salte por la pantalla y puede incumplir WCAG 1.3.2, Secuencia significativa, o 2.4.3, Orden del foco, cuando perjudica el significado o la posibilidad de uso.

Un elemento también puede ser un contenedor. Una tarjeta en una fila flex puede usar su propio display: flex; flex-direction: column para apilar su contenido. Usa inline-flex cuando el contenedor exterior deba situarse dentro de una línea de texto, como un botón con un icono y una etiqueta.

Flexbox empieza con un tamaño para cada elemento y después ajusta esos tamaños para que encajen en el contenedor. Las tres partes de flex controlan ese ajuste: grow, shrink y basis, en ese orden.

Empieza por la base

flex-basis proporciona el tamaño inicial a lo largo del eje principal. Con auto, usa el ancho del elemento en una fila o su altura en una columna; si ese tamaño también es automático, lo determina el contenido. Una base explícita tiene prioridad sobre el ancho, mientras que los tamaños mínimo y máximo siguen limitando el resultado final.

Resta todas las bases y separaciones del tamaño de contenido del contenedor. Un resultado positivo es espacio libre para crecer. Un resultado negativo es espacio al que los elementos deben renunciar.

Reparte el espacio positivo

Tres elementos en una fila de 600px tienen bases de 100px y factores de crecimiento 1, 1 y 2. Sin separaciones, las bases ocupan 300px y quedan 300px. Cuatro partes de crecimiento dividen ese resto en 75px cada una. Los tamaños finales son 175px, 175px y 250px.

Ahora añade gap: 20px. Dos separaciones consumen 40px y quedan 260px después de las bases. Cada parte pasa a ser de 65px; los anchos finales pasan a ser 165px, 165px y 230px. Un factor de 2 duplica el espacio añadido, no todo el ancho final.

Cede espacio mediante una reducción ponderada

Dos elementos con bases de 300px y 400px ocupan un contenedor de 500px sin separación. Deben perder 200px. Si ambos tienen flex-shrink: 1, sus pesos de reducción son 300 y 400: cada factor se multiplica por su tamaño base.

El primero pierde unos 85,7px y termina con unos 214,3px. El segundo pierde unos 114,3px y termina con unos 285,7px. Factores de reducción iguales no significan pérdidas iguales en píxeles. flex-shrink: 0 protege el tamaño base de un elemento, lo que es útil para un avatar o logotipo.

Estos cálculos describen elementos sin relleno, bordes, márgenes ni límites de tamaño que alteren el resultado. Comprueba esas restricciones cuando una disposición real dé un resultado distinto.

Interpreta valores abreviados habituales

Dos elementos con anchos de contenido de 80px y 200px en una fila de 600px pasan a medir 240px y 360px con flex: auto: ambos reciben la mitad de los 320px restantes. Con flex: 1 y sin mínimos limitantes, ambos parten de cero y pasan a medir 300px de ancho.

Permite que una columna flexible se estreche

El mínimo automático de un elemento flex puede mantenerlo tan ancho como una URL o una línea de código indivisible. Permite que el elemento se reduzca y gestiona el contenido en su interior:

.sidebar { flex: 0 0 240px; }
.main { flex: 1; min-width: 0; }
.main pre { overflow-x: auto; }

La barra lateral conserva 240px de ancho. La región principal ocupa el resto. El código se desplaza dentro de ella en lugar de obligar a toda la página a ensancharse. Para texto largo normal, overflow-wrap: anywhere permite los saltos. Un mínimo de cero deja espacio disponible; por sí solo no ajusta el contenido ni permite desplazarlo.

La alineación empieza después de definir los tamaños. Identifica el eje principal, el eje transversal y el espacio que queda en cada uno. Una propiedad puede ser válida y, aun así, no producir ninguna diferencia visible cuando no queda espacio para distribuir.

Reparte el espacio en el eje principal

justify-content coloca el grupo a lo largo del eje principal. Para tres elementos de 100px en una fila de 600px sin separaciones, quedan 300px:

flex-start agrupa los elementos al principio del eje principal; flex-end los agrupa al final. En cambio, start y end siguen la dirección de escritura. En un row-reverse en español, flex-start agrupa contra el borde derecho, pero start agrupa contra el izquierdo.

Si los elementos con flex: 1 consumen todo el espacio de la línea, justify-content no tiene nada que distribuir. Reducir o eliminar el crecimiento cambia esa situación.

Alinea dentro de cada línea

align-items coloca los elementos en el eje transversal dentro de su línea. El valor predeterminado habitual, stretch, hace que los elementos de altura automática de una fila llenen la altura de la línea. Un elemento con una altura establecida no se estira de esta forma. Usa center, start o end para otras posiciones, o baseline para alinear textos de distintos tamaños por su línea base.

align-self sustituye esta elección para un elemento. Flexbox no tiene justify-self: los elementos comparten el eje principal como grupo. justify-items tampoco alinea los elementos flex.

Para centrar un único hijo en ambas direcciones, establece justify-content: center; align-items: center en su padre flex. Un padre más alto, como uno con min-height: 100vh, da espacio para que se vea el centrado vertical. Si el único elemento ya llena el tamaño transversal de la línea, centrarlo ahí no produce ningún movimiento.

Separa grupos con márgenes automáticos

nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  margin-inline-end: auto;
}

En texto horizontal en español, el logotipo permanece a la izquierda mientras los enlaces se mueven a la derecha. Su margen final automático absorbe el espacio restante. En cambio, un margen inicial automático en un elemento empuja ese elemento y los que lo siguen hacia el final. Los márgenes lógicos se adaptan cuando cambia la dirección del texto.

Un único elemento con margin: auto puede centrarse en ambos ejes. Cuando un elemento es demasiado grande, los márgenes automáticos evitan colocar su desbordamiento más allá del borde inicial inaccesible, algo que puede ocurrir con el centrado normal.

Distingue las líneas de los elementos

align-content mueve las líneas como grupo en el eje transversal en un contenedor con ajuste y espacio libre. No tiene efecto con flex-wrap: nowrap. Con wrap, puede colocar una línea incluso si los elementos actuales caben en una sola. align-items gestiona los elementos dentro de cada línea.

gap: 16px 24px establece una separación de 16px entre filas y de 24px entre columnas. Gap crea espacio entre elementos y líneas, nunca alrededor del exterior del contenedor. Añade relleno para crear espacio exterior. Cualquier espacio distribuido mediante la alineación se añade a la separación.

Una cuadrícula define filas y columnas conjuntamente. Establece las pistas en un contenedor y deja que sus hijos directos las ocupen. A diferencia de las líneas flex con ajuste, las filas de una cuadrícula comparten la misma estructura de columnas.

Identifica las partes

Una pista es una fila o columna entre dos líneas de cuadrícula. Una celda es la intersección de una fila y una columna. Un área de cuadrícula es un rectángulo de una o más celdas. Las separaciones distinguen unas pistas de otras.

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 20px;
}

grid-template-columns define las columnas explícitas; grid-template-rows define las filas explícitas. Sin columnas explícitas, una cuadrícula tiene una columna y sus elementos se apilan en filas.

Calcula una parte en fr

La unidad fr reparte el espacio que queda después de las pistas fijas y las separaciones. En un contenedor de 900px, el ejemplo tiene una columna fija de 200px y dos separaciones de 20px. Réstalas primero: quedan 660px. Las dos columnas flexibles solicitan tres partes en total, por lo que una parte es de 220px. Los anchos son 200px, 220px y 440px.

Las fracciones dividen el espacio restante de las pistas, no los 900px completos. Una pista 2fr recibe el doble de espacio flexible que una pista 1fr cuando los tamaños mínimos no las limitan.

Repite pistas y establece límites

repeat(4, 1fr) es una forma abreviada de escribir cuatro pistas flexibles iguales. También es posible repetir un patrón: repeat(2, 100px 1fr) crea 100px 1fr 100px 1fr.

Los tamaños de pista también pueden usar longitudes, porcentajes, auto, min-content y max-content. Las palabras clave de contenido solicitan tamaños basados en las necesidades intrínsecas del contenido.

minmax(150px, 1fr) da a una pista un mínimo de 150px y un máximo flexible. Para las filas creadas automáticamente, usa grid-auto-rows: minmax(100px, auto) para obtener un mínimo de 100px y permitir que el contenido más alto amplíe una fila.

Una pista 1fr sin más tiene un mínimo automático, como minmax(auto, 1fr). Una URL larga e indivisible puede hacer que una columna sea más ancha que las demás. Usa repeat(3, minmax(0, 1fr)) cuando las columnas deban compartir el ancho disponible por igual y permite que el contenido demasiado grande de su interior se ajuste o se desplace.

Mantén las separaciones dentro del ancho disponible

gap: 16px 32px significa 16px entre filas y 32px entre columnas. No crea relleno alrededor de la cuadrícula.

Tres columnas de 33.33% ya usan casi todo un contenedor de 900px. Dos separaciones de 20px añaden entonces unos 40px más allá de su ancho. Las pistas fraccionarias tienen en cuenta esas separaciones antes de repartir el espacio, por lo que repeat(3, 1fr) evita este desbordamiento de porcentajes más separaciones cuando caben los mínimos del contenido.

Deja que las filas respondan al contenido

grid-template-rows: auto 1fr auto es adecuado para una cabecera, una región principal y un pie de página. Las filas exteriores se ajustan a su contenido. Si el contenedor tiene una altura o altura mínima que llenar, la fila central ocupa la altura restante. Deja espacio para que el contenido crezca; una altura mínima de página permite que una página más larga se amplíe.

La colocación en cuadrícula describe los límites de un elemento. Cuenta las líneas que rodean las columnas y filas, o asigna un nombre a una región rectangular y coloca el elemento allí. Ambos métodos disponen las cajas sin cambiar su orden en el HTML.

Cuenta límites, no columnas

Una cuadrícula de tres columnas tiene cuatro líneas de columna. En texto horizontal en español, la línea de columna 1 está a la izquierda y la línea de fila 1 está arriba. Los números negativos cuentan hacia atrás desde el final de la cuadrícula explícita: -1 es su última línea.

Para cubrir tres columnas empezando en la línea 1, termina en la línea 4. Terminar en la línea 3 cubre solo dos pistas.

En un panel con cuatro columnas y tres filas, coloca un gráfico con grid-column: 1 / 4; grid-row: 1 / 3. Ocupa tres columnas y dos filas: seis celdas. Un panel de estadísticas en grid-column: 4; grid-row: 1 / 3 ocupa la última columna a su lado. Una tabla en grid-column: 1 / -1; grid-row: 3 llena la tercera fila.

Dibuja la página usando nombres de área

.page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

Cada cadena describe una fila y cada palabra describe una celda. Repetir header a lo largo de la primera fila permite que la cabecera abarque ambas columnas. Un punto marca una celda vacía. Todas las filas deben contener el mismo número de celdas y cada nombre repetido debe formar un rectángulo. Un área con nombre en forma de L invalida toda la declaración grid-template-areas.

Un área llamada main también crea líneas llamadas main-start y main-end. Puedes usar esos nombres para los límites de otro elemento. Define nombres de línea personalizados entre corchetes en la lista de pistas, como [content-start] 600px [content-end].

Superpón elementos dentro de un área de cuadrícula

Una imagen y su leyenda pueden usar ambas grid-area: 1 / 1. Comparten la primera celda; la leyenda, que aparece más tarde en el HTML, se pinta sobre la imagen. align-self: end mueve la leyenda a la parte inferior de esa área. Los elementos de cuadrícula aceptan z-index sin necesitar una posición distinta de static, por lo que puedes cambiar explícitamente su orden de capas.

Conserva la secuencia de lectura

La colocación manual afecta a la apariencia, no al orden del HTML que siguen los lectores de pantalla y el foco del teclado. Mantén las instrucciones, los encabezados y los enlaces en un orden significativo en el código fuente. Una disposición puede parecer coherente mientras la navegación con tabulador salta entre celdas distantes; esto puede incumplir WCAG 1.3.2 o 2.4.3 cuando perjudica el significado o la posibilidad de uso.

Una lista de productos puede crecer de unas pocas tarjetas a muchas sin cambiar su CSS. Define las columnas, deja que la colocación automática cree las filas y elige si las columnas sin usar deben conservar su espacio.

Deja que los elementos encuentren la siguiente celda

El valor predeterminado grid-auto-flow: row coloca los elementos sin posición en el orden del código fuente, avanzando por una fila y después bajando a la siguiente. Salta las celdas ocupadas. Las pistas adicionales forman la cuadrícula implícita.

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

Siete elementos crean tres filas. La última fila contiene un elemento. Cada fila tiene al menos 150px de alto y puede crecer con su contenido. Las pistas explícitas proceden de la plantilla; las implícitas se añaden según las necesidades de colocación.

Los números de línea negativos cuentan solo dentro de la cuadrícula explícita. Si defines columnas pero no filas, grid-row: 1 / -1 no puede significar todas las filas creadas automáticamente. Define filas explícitas cuando un elemento deba abarcar toda su altura.

grid-auto-flow: column llena columnas y crea columnas adicionales cuyo tamaño se establece con grid-auto-columns. Añadir dense permite que elementos posteriores más pequeños llenen huecos dejados por elementos que abarcan más pistas. Esto puede cambiar la secuencia visual, así que evítalo para instrucciones ordenadas u otro contenido cuya secuencia importe.

Calcula el número de columnas a partir de un mínimo

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

En un ancho de contenido de 1000px, cuatro columnas de 200px más tres separaciones de 16px necesitan 848px. Cinco columnas más cuatro separaciones necesitan 1064px, por lo que solo caben cuatro. Sus anchos finales flexibles son de 238px: resta 48px de separaciones y divide los 952px restantes entre cuatro.

Con 500px, dos columnas mínimas más una separación necesitan 416px; tres necesitan 632px. Caben dos y cada una pasa a medir 242px. El número de columnas cambia con el espacio disponible sin un punto de ruptura.

Elige qué ocurre con las columnas sin usar

Con suficientes elementos, auto-fill y auto-fit tienen el mismo aspecto. Con solo tres elementos en esa cuadrícula de 1000px, auto-fill conserva una cuarta columna vacía, por lo que cada columna ocupada mantiene 238px de ancho. auto-fit colapsa esa pista vacía y su separación. Las tres columnas ocupadas comparten entonces 968px y pasan a medir unos 322,7px cada una.

Una columna con un elemento en cualquier parte está ocupada, aunque una celda de su última fila esté vacía. Auto-fit colapsa las pistas vacías, no cada celda vacía.

Protege el contenedor más estrecho

La repetición automática necesita un tamaño mínimo o máximo de pista definido. repeat(auto-fill, 1fr) no es válido. Un mínimo fijo de 400px también puede desbordarse en un contenedor de 320px. Usa:

grid-template-columns:
  repeat(auto-fit, minmax(min(100%, 400px), 1fr));

min(100%, 400px) elige el mínimo menor, por lo que un contenedor estrecho puede contener una pista sin verse obligado a medir 400px. Sigue gestionando el texto o las imágenes demasiado grandes dentro de las tarjetas.

La alineación en cuadrícula tiene dos escalas distintas. Puedes mover un elemento dentro de su área o mover todo el conjunto de pistas dentro del contenedor. Primero identifica qué espacio quieres distribuir.

Alinea elementos dentro de sus áreas

En texto horizontal en español, las propiedades justify- actúan en el eje en línea, horizontal. Las propiedades align- actúan en el eje de bloque, vertical. La cuadrícula permite alinear elementos en ambos ejes.

Entre los valores están start, end, center y stretch. align-items: baseline alinea las líneas base del texto. La mayoría de los elementos de tamaño automático se estiran de forma predeterminada. Una imagen con su propia relación de aspecto normalmente se coloca en el borde inicial del área en lugar de estirarse en ambas direcciones.

En una fila de tarjetas, el estiramiento hace que todas llenen la altura de la fila. Cambia a align-items: start y cada tarjeta conservará la altura de su contenido; sus bordes inferiores pueden diferir. align-self: end en una leyenda la coloca en la parte inferior de su área de cuadrícula.

Centra una caja en ambas direcciones

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

place-items combina align-items seguido de justify-items. Con un solo valor, lo aplica a ambos. La altura mínima crea espacio vertical alrededor de un elemento bajo. place-self es la propiedad abreviada correspondiente para un elemento individual.

El elemento sigue siendo una caja con texto dentro. Para centrar las palabras dentro de esa caja, establece text-align: center en el elemento. Mover una caja al centro de una celda no cambia la alineación de su texto.

Mueve las pistas como grupo

justify-content coloca todo el conjunto de columnas a lo largo del eje en línea. align-content coloca las filas a lo largo del eje de bloque. Estas propiedades necesitan espacio adicional fuera de las pistas para mostrar su efecto.

Para tres columnas fijas de 200px en un contenedor de 900px sin separaciones, quedan 300px. justify-content: center deja 150px antes de la primera columna y después de la última. justify-content: space-between coloca las columnas exteriores en los bordes del contenedor y distribuye 150px entre columnas vecinas. Los elementos permanecen dentro de sus propias pistas mientras estas se mueven.

Si las columnas usan fr y llenan todo el ancho disponible, no queda espacio horizontal para que justify-content lo distribuya. Establecer justify-items: center aún puede centrar visiblemente un hijo estrecho dentro de su pista ancha. La primera propiedad coloca pistas; la segunda coloca elementos.

Una página puede usar varios métodos de maquetación a la vez. Elige cada método según la relación entre las cajas de esa parte de la página: una secuencia de texto, un grupo flexible, columnas compartidas o una capa superpuesta.

Empieza por el contenido

El flujo normal ya se ocupa de artículos, encabezados y párrafos. Ajusta el texto y desplaza los bloques posteriores hacia abajo cuando crece el contenido anterior. Añade más estructura cuando el diseño requiera una relación diferente.

Flexbox es unidimensional: reparte el espacio a lo largo de una fila o columna y cada línea ajustada es independiente. La cuadrícula es bidimensional: define columnas y filas conjuntamente. Son elecciones sobre las restricciones de la disposición, no una prohibición de usar cualquiera de las dos herramientas para una fila sencilla.

Compara una fila ajustada con columnas compartidas

Siete tarjetas ocupan un ancho de contenido de 1000px con separaciones de 16px. En flexbox, asigna a cada tarjeta flex: 1 1 200px y permite el ajuste en varias líneas. Cuatro tarjetas caben en la primera línea y crecen hasta 238px cada una. Las tres tarjetas de la segunda línea crecen hasta unos 322,7px cada una. Cada línea reparte su propio espacio libre.

Ahora usa repeat(auto-fill, minmax(200px, 1fr)) en una cuadrícula. Caben cuatro columnas. Las siete tarjetas usan esos mismos anchos de columna de 238px; la última fila deja una celda vacía. La cuadrícula mantiene la alineación entre las filas.

Usa la versión flex cuando los elementos más anchos de la última línea se adapten al diseño. Usa la versión de cuadrícula cuando importe una estructura de columnas uniforme.

Combina métodos en distintos niveles

Una página puede usar cuadrícula para una barra lateral y una región principal, flexbox para la barra de herramientas de la región principal y un distintivo absoluto dentro de una tarjeta. Una tarjeta puede ser un elemento de cuadrícula por fuera y un contenedor flex por dentro. Establece la relación exterior en su padre y la disposición interior en la propia tarjeta.

Para una lista larga de texto, columns: 3 o column-width: 250px crea un flujo en varias columnas. El texto continúa hacia abajo por una columna y después pasa a la siguiente; no es una cuadrícula de tarjetas independientes. Comprueba que este recorrido de lectura sea adecuado para el contenido.

Interpreta con cuidado las disposiciones antiguas

Las columnas flotantes, las cuadrículas de bloques en línea y las tablas HTML usadas para maquetar páginas siguen apareciendo en código antiguo. Sus reglas de separación y contención son distintas de las de flexbox y las cuadrículas. Al crear una estructura de página nueva, usa herramientas de maquetación modernas. Reserva <table> para datos cuyas filas y columnas expresen relaciones tabulares.

Una disposición de página útil tiene un ancho de contenido legible, espacio en los bordes y capacidad para contenido más largo. Construye sus regiones principales dentro del flujo para que un artículo que crece desplace el pie de página hacia abajo de forma natural.

Centra una columna de contenido

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

El máximo limita el crecimiento en pantallas anchas. Los márgenes automáticos en línea reparten el espacio restante a ambos lados. El relleno mantiene el texto alejado de los bordes en pantallas estrechas. Para texto continuo, max-width: 65ch proporciona una medida aproximada de 65 caracteres; un ch es el ancho del dígito 0 en la fuente actual. Una longitud de línea de unos 45–75 caracteres es un intervalo útil para la lectura, aunque el ancho real de las letras varía.

Coloca las regiones de la página en una cuadrícula

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

La cabecera y el pie de página abarcan ambas columnas. La barra lateral conserva 240px y la región principal recibe el resto. El mínimo de cero en la pista flexible impide que el contenido ancho la fuerce a superar el espacio disponible que le corresponde. Gestiona ese contenido mediante ajuste o desplazamiento dentro de la región principal.

El patrón de tres columnas, a menudo llamado disposición del santo grial, usa 200px 1fr 200px y las áreas de la fila central "nav main aside", con la cabecera y el pie abarcando las tres columnas. Las columnas laterales fijas siguen necesitando suficiente ancho disponible; prueba la disposición con anchos estrechos.

Mantén el pie de una página corta en la parte inferior

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Con cabecera, región principal y pie de página como hijos directos, la fila central llena la altura sin usar. El pie de una página corta llega a la parte inferior de la ventana; el de una página larga sigue al contenido. Este patrón se llama pie de página al fondo, pero el pie no necesita position: sticky.

La unidad tradicional relativa al área de visualización es vh. En teléfonos, 100vh puede extenderse detrás de los controles visibles del navegador. La altura dinámica del área de visualización, dvh, sigue la altura visible cuando cambian esos controles; todos los navegadores principales la admiten desde 2022. Usa min-height para que el contenido más largo pueda ampliar la página. Un height fijo puede hacer que el contenido se desborde sobre lo que sigue.

Una alternativa flex usa un body en columna con min-height: 100dvh y después main { flex: 1; }. Para una fila con barra lateral, usa .sidebar { flex: 0 0 240px; } y .main { flex: 1; min-width: 0; }.

Haz que una barra lateral se adhiera y una imagen ocupe todo el ancho

Una barra lateral de cuadrícula puede usar position: sticky; top: 16px; align-self: start. Conservar la altura de su propio contenido deja espacio para moverse dentro de su fila.

Para contenido de artículo a todo el ancho, define las columnas como 1fr min(65ch, 100% - 32px) 1fr. Coloca los hijos normales en la columna 2 y una imagen ancha en grid-column: 1 / -1. La pista central sigue siendo legible mientras la imagen abarca todo el ancho del contenedor.

Los componentes pequeños de una interfaz combinan unas pocas relaciones: una imagen conserva su tamaño, el texto llena lo que queda, los controles relacionados comparten una fila o varias tarjetas alinean sus partes internas. Da a cada contenedor la disposición que exprese su función.

Elige el tipo de centrado adecuado

Flexbox también puede centrar un hijo con justify-content: center; align-items: center. Asegúrate de que el contenedor tenga espacio libre en el eje correspondiente.

Una fila de navegación y una fila de imagen y texto

nav { display: flex; align-items: center; gap: 16px; }
.logo { margin-inline-end: auto; }
.media { display: flex; align-items: flex-start; gap: 16px; }
.media img { flex: none; width: 64px; }
.media-body { flex: 1; min-width: 0; }

En español, el logotipo permanece a la izquierda y los enlaces se agrupan a la derecha. Cuando la navegación tiene exactamente dos hijos, un logotipo y una lista de enlaces, justify-content: space-between puede separarlos; la lista necesita su propia disposición flex para organizar sus enlaces.

En la fila de imagen y texto, la imagen conserva su ancho. El texto recibe el resto y puede reducirse. La alineación al inicio del eje transversal evita que una imagen de altura automática se estire para igualar un bloque de texto largo. Esto es adecuado para un comentario, un perfil o una línea de producto.

Tarjetas con botones alineados

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.card { display: flex; flex-direction: column; }
.card .button { margin-top: auto; }

La cuadrícula padre estira las tarjetas de cada fila hasta que tienen la misma altura. Dentro de cada tarjeta, el margen superior automático ocupa el espacio vertical sin usar antes del botón y lo coloca en la parte inferior. Los títulos aún pueden tener alturas distintas.

Para alinear títulos, texto y pies entre tarjetas, usa una subcuadrícula. Haz que cada tarjeta sea un elemento de cuadrícula que abarque tres filas del padre y después establece display: grid; grid-template-rows: subgrid. Cada tarjeta adopta esas filas del padre para sus tres partes. La subcuadrícula funciona en los navegadores principales desde septiembre de 2023.

Capas superpuestas, formularios y grupos de entrada

Para colocar texto sobre una imagen, convierte el contenedor en una cuadrícula y coloca ambos hijos en grid-area: 1 / 1. Una leyenda posterior se pinta por encima de la imagen. Otra opción es un contenedor relativo con una capa de leyenda absoluta que use inset: 0.

Un formulario con etiquetas y campos alternados puede usar grid-template-columns: max-content 1fr; gap: 12px 16px; align-items: center. La etiqueta más ancha establece una columna compartida de etiquetas. Los campos se alinean en la segunda columna; las filas flex separadas no pueden compartir automáticamente ese ancho de etiqueta.

Un grupo de búsqueda usa display: flex; gap: 8px, con input { flex: 1; min-width: 0; } y button { flex: none; }. El campo de entrada puede reducirse mientras el botón conserva su ancho natural. Para etiquetas o controles de barra de herramientas que deban pasar a otra línea con sus anchos naturales, usa display: flex; flex-wrap: wrap; gap: 8px.

Un problema de disposición es más fácil de corregir cuando inspeccionas las cajas reales del navegador. Empieza por el elemento que se desplazó o se desbordó y después comprueba la disposición en la que participa antes de cambiar valores.

Inspecciona en un orden útil

1. Encuentra el elemento en las herramientas de desarrollo.
2. Inspecciona el display calculado de su padre: el flujo normal, flex y cuadrícula asignan funciones distintas a las propiedades.
3. Comprueba si tu propiedad se aplica a ese elemento en esa disposición.
4. Compara los tamaños, márgenes y posición calculados con los valores que esperabas.
5. Activa o desactiva una declaración cada vez para ver qué restricción causa el problema.

El panel del modelo de caja muestra contenido, relleno, borde y margen. Las guías superpuestas de cuadrícula muestran líneas, números, pistas y separaciones; las de flex muestran elementos y el espacio asignado. Úsalas para comprobar lo que ha construido el navegador, no solo lo que pretendía la hoja de estilo.

Comprueba las propiedades inactivas

Los desplazamientos no hacen nada en un elemento estático. El ancho y el alto no hacen nada en un <span> en línea normal, aunque sí dimensionan una imagen en línea. z-index necesita una caja posicionada o un elemento flex o de cuadrícula. float no tiene efecto en elementos flex o de cuadrícula y justify-self no puede alinear un elemento flex.

Una declaración de alineación válida puede no tener efecto visible porque los elementos ya usan todo el espacio. align-content tampoco tiene efecto en un contenedor flex nowrap. El posicionamiento adhesivo necesita un desplazamiento y espacio para moverse.

Localiza el desbordamiento horizontal

El desbordamiento puede deberse a una caja demasiado grande o a una caja más pequeña desplazada más allá de un borde por márgenes, desplazamientos o anchos vecinos. Las causas comunes incluyen:

• Un ancho fijo, como 1200px, mayor que el área de visualización.
• width: 100% más relleno con el cálculo de tamaño content-box.
• width: 100vw, que puede incluir el ancho de una barra de desplazamiento vertical visible.
• Una palabra larga indivisible, una URL o una línea de código.
• El mínimo automático de un elemento flex o de una pista 1fr.
• Un mínimo de repetición automática más ancho que su contenedor.

Añade temporalmente * { outline: 1px solid red; } para revelar los bordes. Los contornos no ocupan espacio en la disposición, por lo que muestran los límites sin cambiar los tamaños de las cajas como harían los bordes.

Examina un bloque de código ancho

Una página flex tiene una barra lateral de 240px y una columna principal que contiene un ejemplo de código de 1400px de ancho. Toda la página se desplaza lateralmente. La guía superpuesta de flex muestra que la región principal es más ancha que el espacio que le corresponde y que su ancho mínimo calculado es auto.

.main { min-width: 0; }
.main pre { overflow-x: auto; }

La primera regla permite que el elemento flex se reduzca. La segunda mantiene accesible el código ancho mediante desplazamiento horizontal local. Ocultar todo el desbordamiento de la página escondería el síntoma sin hacer accesible el código.

Ante otros resultados inesperados, inspecciona los márgenes que colapsan, una cabecera fija que cubre contenido, un hijo absoluto cuyo padre previsto es estático o una capa atrapada dentro de un contexto de apilamiento creado por opacidad o transformación.

Prueba contenido real y espacios estrechos

Cambia el tamaño de la ventana, usa un nombre o una URL largos y amplía el texto al 200 %. Comprueba el foco del teclado cerca de las barras fijas. El criterio 1.4.4 de WCAG 2.2 exige que el texto pueda ampliarse al 200 % sin pérdida de contenido ni funcionalidad. El criterio 1.4.10 exige generalmente la redistribución del contenido a 320 píxeles CSS sin desplazamiento en dos direcciones; el contenido que necesita una disposición bidimensional, como una tabla de datos, tiene excepciones. Prueba más que el texto breve de ejemplo que hizo que la página pareciera correcta al principio.