Используйте HTML-атрибут dir, чтобы задать основное направление текста, а CSS-свойство flex-direction: row-reverse — чтобы обратить направление потока элементов во flex-строке. Размещая карточки на общедоступной странице с Mac, сначала определите, нужно ли изменить направление текста, порядок элементов или выравнивание.

Предполагается, что вы редактируете HTML и CSS страницы в текстовом редакторе и просматриваете её в браузере на компьютере. Задача — расположить три нейтральные плитки — Alpha, Beta и Gamma, — сохранив осмысленное поведение текста и порядок элементов в документе.

Что именно меняет каждый параметр направления?

Атрибут HTML dir задаёт основное направление текста элемента. Допустимые явные значения — ltr и rtl; значение auto позволяет браузеру определить направление по содержимому. WHATWG рекомендует задавать направление текста средствами HTML, чтобы эта информация сохранялась и без CSS. Стандарт HTML: атрибут dir.

CSS-свойство direction также задаёт основное направление текста и влияет на поведение макета. Оно наследуется, поэтому правило direction: rtl для контейнера может повлиять на его потомков. MDN рекомендует по возможности использовать HTML-атрибут dir. Рассматривайте переопределение направления в CSS как осознанное решение о направлении текста, а не как удобный способ передвинуть блоки. MDN: direction.

CSS-свойство flex-direction управляет главной осью flex-контейнера. Значение row следует вдоль строчной оси текущего режима письма; значение row-reverse меняет местами её начальный и конечный края. Оно меняет направление расположения элементов, сохраняя их исходную последовательность. W3C: направление потока flex.

Эти механизмы взаимодействуют. При горизонтальном режиме письма flex-строка ltr начинается слева, а flex-строка rtl — справа. Добавление row-reverse меняет направление начала в обоих случаях. Поэтому row-reverse не всегда означает, что первый элемент окажется справа. MDN: flex-direction.

Какой параметр соответствует нужному результату?

Перед редактированием сформулируйте желаемый результат конкретно: «Оставить английские подписи без изменений, расположить плитки в обратном визуальном порядке и выровнять группу по правому краю». Такая формулировка разделяет решения о тексте, потоке элементов и выравнивании.

Желаемый результат С чего начать Что проверить
Задать основное направление текста содержимого HTML dir="ltr" или dir="rtl" Примените атрибут к области, текст которой требует этого направления.
Изменить визуальную последовательность всех элементов во flex-строке на обратную flex-direction: row-reverse Сначала проверьте текущее направление контейнера.
Переместить строку без изменения её порядка к конечному краю главной оси justify-content: flex-end Убедитесь, что для выравнивания есть свободное пространство.
Изменить смысловую последовательность во всех представлениях Изменить порядок элементов в исходном коде Убедитесь, что получившаяся последовательность чтения осмысленна.
Визуально переместить отдельные элементы Индивидуальные значения order Проверьте различия между визуальным порядком и порядком в исходном коде.

Различие между разворотом и выравниванием имеет значение. Для строки ltr значение justify-content: flex-end может поместить Alpha, Beta и Gamma вместе справа, не меняя их последовательность. Выравнивание распределяет свободное пространство вдоль главной оси; flex-end обозначает конечную сторону главной оси flex-контейнера. Эффект выравнивания может исчезнуть, если пространство займут гибкие элементы. MDN: justify-content.

Если читатели должны воспринимать элементы в определённом порядке, задайте эту последовательность в самом документе. W3C прямо предостерегает от использования разворота flex-элементов или order для компенсации неверного порядка элементов в исходном коде. W3C: порядок и ориентация.

Предусмотрите четыре комбинации до изменения страницы

Следующее сравнение основано на документированных правилах осей. Предполагается writing-mode: horizontal-tb, одна flex-линия, одинаковые значения order и исходный порядок Alpha, Beta, Gamma. «Расположение слева направо» описывает физические позиции плиток на экране.

Направление контейнера Направление flex Первый элемент начинается Расположение слева направо
ltr row Слева Alpha, Beta, Gamma
ltr row-reverse Справа Gamma, Beta, Alpha
rtl row Справа Gamma, Beta, Alpha
rtl row-reverse Слева Alpha, Beta, Gamma

Вторая и третья строки могут выглядеть одинаково, если содержимое состоит из простых прямоугольников. Однако параметры направления текста в них различаются. Четвёртая комбинация объясняет частую неожиданность: применение одновременно rtl и row-reverse приводит к потоку элементов слева направо. MDN описывает эту зависимость от направления. MDN: flex-direction.

Основное направление текста также влияет на пунктуацию и порядок разнонаправленных фрагментов текста. Задание rtl не разворачивает каждый символ английского слова. Подпись может остаться узнаваемой, а знак препинания при этом оказаться в неожиданном месте. Поэтому простые плитки подходят для проверки размещения блоков, но не позволяют полноценно оценить поведение текста. MDN: примечания по использованию dir.

Сравните варианты на полной странице на Mac

Сохраните следующий полный документ как direction-demo.html в текстовом редакторе, сохраняющем обычный текст, а затем откройте файл в браузере. В нём используются вымышленные подписи и прямоугольники CSS без внешних зависимостей. Ожидаемые результаты следуют из документированных правил; пример не выдаётся за результат проверки в браузере.

<!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>

Сравните четыре строки с таблицей прогнозов. Во всех строках используется одна и та же последовательность в исходном коде. Отличаются только направление контейнера и класс разворота. Явно заданный горизонтальный режим письма позволяет сосредоточиться на обычном горизонтальном варианте для компьютера.

Затем замените только justify-content: flex-start на justify-content: flex-end, сохраните файл и перезагрузите страницу. Группы должны переместиться к противоположным краям главной оси, сохранив направление элементов в каждой строке. Так можно отделить позиционирование от разворота, не добавляя ещё один параметр направления текста. MDN: justify-content.

Наконец, восстановите значение выравнивания и добавьте точку после Alpha в каждой строке. Сравните и пунктуацию, и расположение плиток. Это наглядная проверка направления текста, а не рекомендация задавать rtl для обычных английских подписей. Объяснение основного направления в MDN показывает, почему пунктуацию на границах текста нужно проверять отдельно. MDN: dir.

Разберитесь с неожиданным результатом в реальном макете

Убедитесь, что родительский элемент — flex-контейнер

Проверьте элемент, содержащий плитки. flex-direction применяется, когда значение его display равно flex или inline-flex. Объявление для обычного блочного контейнера не создаст flex-макет. Также проверьте, не меняет ли более позднее правило фактическое значение при текущей ширине окна браузера. MDN: описание flex-direction.

Проверьте унаследованное направление, прежде чем добавлять ещё один разворот

Проверьте контейнер и его предков на наличие dir, затем проверьте объявления CSS-свойства direction. Если dir не указан, направление обычно наследуется от родителя; отсутствие атрибута не включает автоматическое определение. Если исходная последовательность неожиданно начинается справа, причиной может быть унаследованное направление. MDN: наследование dir.

Не используйте dir="auto" как переключатель макета. WHATWG определяет его как автоматическое определение направления по содержимому, главным образом по первому символу с сильной направленностью, и рекомендует оставлять его для текста с действительно неизвестным направлением. Требование к макету не должно зависеть от того, какая подпись стоит первой. Стандарт HTML: атрибут dir.

Разделите разворот элементов и разворот строк

Если проблема появляется только после сужения окна, проверьте перенос. row-reverse меняет направление вдоль главной оси; wrap-reverse меняет направление, в котором располагаются flex-линии. Значение по умолчанию nowrap сохраняет одну строку и может привести к переполнению. Это отдельные настройки, поэтому проверьте и узкое окно, и исходную ширину для компьютера. MDN: flex-wrap.

Проверьте правила индивидуального порядка

Проверьте, задано ли для какой-либо плитки значение order. Flex-макет группирует элементы по этому целому числу, располагая сначала элементы с наименьшим значением и сохраняя порядок в исходном коде внутри групп с одинаковыми значениями. Затем разворот меняет направление, в котором располагается полученная последовательность. Сбросьте неожиданные индивидуальные настройки порядка, прежде чем решать, что направление контейнера задано неверно. MDN: порядок flex-элементов.

Проверьте последовательность чтения, прежде чем сохранять изменение

Для нейтральных декоративных плиток требованием может быть только визуальный разворот. Для ссылок и элементов управления проверьте последовательность в исходном коде и проследите за перемещением клавиатурного фокуса по компоненту. Сам по себе разворот flex-элементов не меняет последовательность навигации или озвучивания. Поэтому у визуально развёрнутой группы может сохраниться исходная последовательность взаимодействия. W3C: направление потока flex.

Используйте эту проверку, чтобы решить, нужно ли менять исходный код. Если осмысленная последовательность — Gamma, Beta, Alpha, задайте именно её для элементов. Если последовательность чтения Alpha, Beta, Gamma остаётся правильной и нужно лишь изменить визуальное представление, оцените расположение с учётом этого различия. MDN показывает поведение порядка в исходном коде на примере ссылок, доступных для фокусировки. MDN: порядок flex-элементов.

Выбирайте механизм по требованиям: HTML-атрибут dir — для основного направления текста, flex-direction — для потока элементов вдоль оси flex, а выравнивание — для размещения последовательности без изменения её порядка. Прежде чем сохранять результат, отдельно сравните расположение плиток, пунктуацию, переносы и порядок в исходном коде. Так вы сможете последовательно разбираться с макетом, который лишь выглядит развёрнутым.

Источники