Usa HTML dir para establecer la dirección base del texto y CSS flex-direction: row-reverse para invertir el flujo de una fila flex. Al organizar tarjetas en una página pública desde tu Mac, primero decide si necesitas cambiar la dirección del texto, la secuencia de elementos o la alineación.

Esta guía asume que estás editando el HTML y CSS de una página en un editor de texto y previsualizándola en un navegador de escritorio. La tarea consiste en organizar tres fichas neutrales—Alpha, Beta y Gamma—manteniendo intencionales el comportamiento del texto y el orden del documento.

¿Qué cambia realmente cada ajuste de dirección?

El atributo dir de HTML describe la dirección base del texto de un elemento. Sus valores explícitos son ltr y rtl; auto pide al navegador que determine la dirección a partir del contenido. WHATWG anima a los autores a expresar la dirección del texto mediante HTML para que la información permanezca disponible sin CSS. Estándar HTML: El atributo dir.

CSS direction también controla la dirección base del texto y participa en el comportamiento de layout. Se hereda, por lo que establecer direction: rtl en un contenedor puede afectar a sus descendientes. MDN recomienda usar HTML dir cuando sea posible. Trata una anulación de dirección CSS como una decisión deliberada de dirección de texto, en lugar de una forma conveniente de mover cajas. MDN: direction.

CSS flex-direction controla el eje principal de un contenedor flex. Un row sigue el eje en línea del modo de escritura actual; row-reverse intercambia sus direcciones main-start y main-end. Cambia la dirección en la que se colocan los elementos, preservando su secuencia de origen. W3C: Flex Flow Direction.

Estos mecanismos interactúan. Con escritura horizontal, una fila flex ltr comienza a la izquierda, mientras que una fila flex rtl comienza a la derecha. Añadir row-reverse invierte cualquiera de las direcciones de inicio. Por consiguiente, row-reverse no siempre significa que el primer elemento aparezca a la derecha. MDN: flex-direction.

¿Qué ajuste coincide con tu resultado previsto?

Antes de editar, escribe el resultado deseado en términos concretos: “Mantén las etiquetas en inglés sin cambios, coloca las fichas en orden visual inverso y mantén el grupo a la derecha”. Esa afirmación identifica decisiones separadas sobre texto, flujo de elementos y alineación.

Resultado previsto Punto de partida adecuado Qué comprobar
Establecer la dirección base del texto del contenido HTML dir="ltr" o dir="rtl" Aplícalo al ámbito cuyo texto requiere esa dirección.
Invertir la progresión visual de cada elemento en una fila flex flex-direction: row-reverse Comprueba primero la dirección existente del contenedor.
Mover una fila sin cambios hacia su borde main-end justify-content: flex-end Asegúrate de que exista espacio libre para la alineación.
Cambiar la secuencia significativa en todas partes Reordenar los elementos de origen Confirma que la secuencia de lectura resultante tenga sentido.
Reposicionar elementos seleccionados visualmente Valores order individuales Revisa la diferencia entre orden visual y de origen.

La distinción entre inversión y alineación importa. Con una fila ltr, justify-content: flex-end puede colocar Alpha, Beta y Gamma juntas a la derecha sin invertir su secuencia. La alineación distribuye el espacio disponible del eje principal; flex-end se refiere al lado main-end del contenedor flex. Su efecto puede desaparecer cuando los elementos flexibles consumen ese espacio. MDN: justify-content.

Para una secuencia que los lectores deben encontrar en un orden particular, establece esa secuencia en el propio documento. W3C advierte explícitamente contra el uso de inversión flex u order para compensar un orden de origen incorrecto. W3C: Ordering and Orientation.

Predice las cuatro combinaciones antes de cambiar la página

La siguiente comparación se deriva de las reglas de eje documentadas. Asume writing-mode: horizontal-tb, una línea flex, valores order iguales, y orden de origen Alpha, Beta, Gamma. “Apariencia de izquierda a derecha” describe las posiciones físicas de las fichas en la pantalla.

Dirección del contenedor Dirección flex La primera ficha comienza en Apariencia de izquierda a derecha
ltr row Izquierda Alpha, Beta, Gamma
ltr row-reverse Derecha Gamma, Beta, Alpha
rtl row Derecha Gamma, Beta, Alpha
rtl row-reverse Izquierda Alpha, Beta, Gamma

La segunda y tercera fila pueden parecerse cuando sus contenidos son rectángulos simples. Sin embargo, sus ajustes de dirección de texto difieren. La cuarta combinación explica una sorpresa común: aplicar tanto rtl como row-reverse produce una progresión de elementos de izquierda a derecha. MDN documenta este comportamiento dependiente de la dirección. MDN: flex-direction.

La dirección base del texto también afecta a la puntuación y al orden de las secuencias de texto direccionales. Establecer rtl no simplemente invierte cada carácter de una palabra en inglés. Una etiqueta puede permanecer reconocible mientras su puntuación aparece en una posición inesperada. Eso hace que las fichas sencillas sean útiles para examinar la colocación de cajas, pero insuficientes para evaluar el comportamiento del texto. MDN: notas de uso de dir.

Prueba una página de comparación completa en tu Mac

Guarda el siguiente documento completo como direction-demo.html usando un editor de texto plano, luego abre el archivo en tu navegador. Usa etiquetas sintéticas y rectángulos CSS, sin dependencias externas. Los resultados esperados se derivan de las reglas documentadas; el ejemplo no se presenta como un resultado probado en navegador.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Compara las cuatro filas con la tabla de predicción. Las cuatro contienen la misma secuencia de origen. Solo difieren su dirección de contenedor y clase de inversión. El modo de escritura horizontal explícito mantiene esta demostración centrada en el caso habitual de escritorio horizontal.

A continuación, cambia solo justify-content: flex-start a justify-content: flex-end, guarda y recarga. Los grupos deberían moverse a sus bordes opuestos del eje principal manteniendo la progresión de elementos de cada fila. Esto separa la colocación de la inversión sin introducir otro ajuste de dirección de texto. MDN: justify-content.

Finalmente, restaura el ajuste de alineación y añade un punto después de Alpha en cada fila. Compara la puntuación así como las posiciones de las fichas. Esto es una prueba ilustrativa de dirección de texto, no una recomendación para asignar rtl a etiquetas ordinarias en inglés. La explicación de MDN sobre la dirección base describe por qué la puntuación de límite merece su propia comprobación. MDN: dir.

Diagnostica resultados inesperados en el layout real

Confirma que el padre es un contenedor flex

Comprueba el elemento que contiene las fichas. flex-direction se aplica cuando su display es flex o inline-flex. Una declaración en un contenedor de bloque ordinario no establecerá layout flex. Comprueba también si una regla posterior cambia el valor efectivo en el ancho actual del navegador. MDN: descripción de flex-direction.

Comprueba la dirección heredada antes de añadir otra inversión

Inspecciona el contenedor y sus ancestros en busca de dir, luego busca declaraciones CSS direction. Cuando se omite dir, la dirección generalmente se hereda del padre; la omisión no solicita detección automática. Si la secuencia de origen comienza inesperadamente a la derecha, la dirección heredada puede explicarlo. MDN: herencia de dir.

Evita usar dir="auto" como interruptor de layout. WHATWG lo define mediante detección de dirección basada en contenido, principalmente usando el primer carácter fuertemente direccional, y recomienda reservarlo para dirección de texto genuinamente desconocida. Un requisito de layout no debería depender de qué etiqueta aparezca primero. Estándar HTML: El atributo dir.

Separa la inversión de elementos de la inversión de líneas

Si el problema aparece solo al estrechar la ventana, inspecciona el wrapping. row-reverse cambia la progresión del eje principal; wrap-reverse cambia la dirección en la que se apilan las líneas flex. El nowrap predeterminado mantiene una sola línea y puede permitir desbordamiento. Son controles separados, así que prueba una ventana estrecha además del ancho de escritorio inicial. MDN: flex-wrap.

Busca reglas de ordenación individuales

Comprueba si alguna ficha tiene un valor order. El layout flex agrupa los elementos por ese entero, el más bajo primero, y preserva el orden de origen dentro de grupos de igual valor. Una inversión entonces cambia la dirección desde la que se coloca esa secuencia resultante. Restablece cualquier ordenación inesperada a nivel de elemento antes de decidir que la dirección del contenedor es incorrecta. MDN: Ordering flex items.

Comprueba la secuencia de lectura antes de mantener el cambio

Para fichas decorativas neutrales, la inversión visual puede ser el único requisito. Para enlaces o controles, inspecciona la secuencia en el origen y sigue el foco del teclado a través del componente. La inversión flex en sí no cambia el orden de navegación secuencial ni de habla. Por tanto, un grupo invertido visualmente puede retener su secuencia de interacción original. W3C: Flex Flow Direction.

Usa esa comprobación para decidir si el origen debe cambiar. Si Gamma, Beta, Alpha es la secuencia significativa prevista, pon los elementos en esa secuencia. Si Alpha, Beta, Gamma sigue siendo la secuencia de lectura correcta y solo la presentación necesita invertirse, evalúa la disposición visual con esa distinción en mente. MDN demuestra el comportamiento de orden de origen con enlaces enfocables. MDN: Ordering flex items.

Elige el mecanismo según el requisito: HTML dir para dirección base de texto, flex-direction para flujo del eje flex, y alineación para posicionar una secuencia sin cambios. Antes de mantener el resultado, compara por separado la colocación de fichas, puntuación, wrapping y orden de origen. Eso te da una forma repetible de resolver un layout que simplemente parece invertido.

Fuentes