Content Reflow
Reflujo de contenido
El reflujo de contenido ajusta una página en un espacio estrecho sin perder contenido ni funciones. La mayoría de la lectura no debería necesitar desplazamiento bidireccional.
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll3 columnasEstrecho1 columnamin-inline-size: 0overflow-x:auto320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scrollA11YOtro ejemplo
Al 400% de zoom, las tarjetas se apilan en una columna y el texto se ajusta. Una tabla ancha solo se desplaza dentro de su propia área.
Partes principales
- 01Vista estrecha
- 02Texto envuelto
- 03Regiones apiladas
- 04Controles en crecimiento
- 05excepción de desbordamiento local
- 06Ninguna función perdida
Úsalo cuando
Prueba con un ancho igual a 320 píxeles CSS. Deja que el texto se ajuste, que los controles crezcan y que las secciones de la página se apilen.
No lo uses cuando
No ocultes ni trunques contenido importante con un zoom alto. Evita el desplazamiento horizontal en toda la página.
Nombre usado en código
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Reflujo de contenido (Content Reflow). User context: Al 400% de zoom, las tarjetas se apilan en una columna y el texto se ajusta. Una tabla ancha solo se desplaza dentro de su propia área. Recommended pattern: Reflujo de contenido (Content Reflow). Why it fits: Prueba con un ancho igual a 320 píxeles CSS. Deja que el texto se ajuste, que los controles crezcan y que las secciones de la página se apilen. Do not use it when: No ocultes ni trunques contenido importante con un zoom alto. Evita el desplazamiento horizontal en toda la página. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Reflujo de contenido (Content Reflow) is used now. Definition: El reflujo de contenido ajusta una página en un espacio estrecho sin perder contenido ni funciones. La mayoría de la lectura no debería necesitar desplazamiento bidireccional. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.