Użyj atrybutu HTML dir, aby ustawić podstawowy kierunek tekstu, a właściwości CSS flex-direction: row-reverse, aby odwrócić przepływ elementów w wierszu flex. Rozmieszczając karty na publicznej stronie na Macu, najpierw zdecyduj, czy chcesz zmienić kierunek tekstu, kolejność elementów czy wyrównanie.

Ten poradnik zakłada, że edytujesz HTML i CSS strony w edytorze tekstu oraz wyświetlasz jej podgląd w przeglądarce na komputerze. Zadanie polega na rozmieszczeniu trzech neutralnych kafelków — Alpha, Beta i Gamma — przy zachowaniu zamierzonego sposobu wyświetlania tekstu i kolejności w dokumencie.

Co faktycznie zmienia każde ustawienie kierunku?

Atrybut HTML dir określa podstawowy kierunek tekstu elementu. Jego jawne wartości to ltr i rtl; wartość auto poleca przeglądarce ustalić kierunek na podstawie treści. WHATWG zachęca autorów do określania kierunku tekstu w HTML, aby informacja ta była dostępna także bez CSS. Standard HTML: atrybut dir.

Właściwość CSS direction również steruje podstawowym kierunkiem tekstu i wpływa na zachowanie układu. Jest dziedziczona, więc ustawienie direction: rtl na kontenerze może oddziaływać na jego elementy potomne. MDN zaleca używanie HTML dir, gdy to możliwe. Traktuj nadpisanie kierunku w CSS jako świadomą decyzję dotyczącą kierunku tekstu, a nie wygodny sposób przesuwania pól. MDN: direction.

Właściwość CSS flex-direction określa oś główną kontenera flex. Wartość row podąża za osią tekstu w bieżącym trybie pisma; row-reverse zamienia kierunki początku i końca osi głównej. Zmienia kierunek rozmieszczania elementów, zachowując ich kolejność w kodzie źródłowym. W3C: kierunek przepływu w flex.

Te mechanizmy na siebie oddziałują. Przy poziomym trybie pisma wiersz flex ltr zaczyna się po lewej, a wiersz flex rtl — po prawej. Dodanie row-reverse odwraca każdy z tych kierunków początkowych. Dlatego row-reverse nie zawsze oznacza, że pierwszy element pojawi się po prawej. MDN: flex-direction.

Które ustawienie odpowiada zamierzonemu efektowi?

Zanim zaczniesz edycję, opisz konkretnie oczekiwany rezultat: „Pozostaw etykiety angielskie bez zmian, odwróć wizualną kolejność kafelków i ustaw grupę po prawej”. To zdanie wskazuje na odrębne decyzje dotyczące tekstu, przepływu elementów i wyrównania.

Zamierzony efekt Odpowiedni punkt wyjścia Co sprawdzić
Ustawienie podstawowego kierunku tekstu treści HTML dir="ltr" lub dir="rtl" Zastosuj ustawienie do zakresu, którego tekst wymaga danego kierunku.
Odwrócenie wizualnego kierunku wszystkich elementów w wierszu flex flex-direction: row-reverse Najpierw sprawdź bieżący kierunek kontenera.
Przesunięcie niezmienionego wiersza w stronę końca osi głównej justify-content: flex-end Upewnij się, że jest dostępna wolna przestrzeń do wyrównania.
Zmiana znaczącej kolejności we wszystkich miejscach Zmiana kolejności elementów źródłowych Sprawdź, czy wynikowa kolejność czytania ma sens.
Wizualne przestawienie wybranych elementów Indywidualne wartości order Sprawdź różnicę między kolejnością wizualną a źródłową.

Różnica między odwróceniem a wyrównaniem ma znaczenie. W wierszu ltr właściwość justify-content: flex-end może umieścić kafelki Alpha, Beta i Gamma razem po prawej, nie zmieniając ich kolejności. Wyrównanie rozdziela dostępną przestrzeń wzdłuż osi głównej; flex-end odnosi się do strony końca osi głównej kontenera flex. Efekt może zniknąć, gdy elementy elastyczne wypełnią tę przestrzeń. MDN: justify-content.

Jeśli czytelnicy mają napotkać elementy w określonej kolejności, ustal ją w samym dokumencie. W3C wyraźnie przestrzega przed używaniem odwrócenia flex lub order w celu skompensowania nieprawidłowej kolejności źródłowej. W3C: kolejność i orientacja.

Przewidź cztery kombinacje, zanim zmienisz stronę

Poniższe porównanie wynika z udokumentowanych reguł dotyczących osi. Zakłada writing-mode: horizontal-tb, jeden wiersz flex, jednakowe wartości order oraz kolejność źródłową Alpha, Beta, Gamma. „Wygląd od lewej do prawej” opisuje fizyczne położenie kafelków na ekranie.

Kierunek kontenera Kierunek flex Pierwszy kafelek zaczyna Wygląd od lewej do prawej
ltr row Po lewej Alpha, Beta, Gamma
ltr row-reverse Po prawej Gamma, Beta, Alpha
rtl row Po prawej Gamma, Beta, Alpha
rtl row-reverse Po lewej Alpha, Beta, Gamma

Drugi i trzeci wiersz mogą wyglądać tak samo, jeśli ich zawartość składa się z prostych prostokątów. Różnią się jednak ustawieniami kierunku tekstu. Czwarta kombinacja wyjaśnia częste zaskoczenie: zastosowanie jednocześnie rtl i row-reverse daje przepływ elementów od lewej do prawej. MDN opisuje to zachowanie zależne od kierunku. MDN: flex-direction.

Podstawowy kierunek tekstu wpływa również na interpunkcję i kolejność fragmentów tekstu o różnych kierunkach. Ustawienie rtl nie odwraca po prostu każdego znaku w angielskim wyrazie. Etykieta może pozostać czytelna, a jej interpunkcja pojawić się w nieoczekiwanym miejscu. Dlatego proste kafelki są przydatne do sprawdzania rozmieszczenia pól, ale nie wystarczają do oceny zachowania tekstu. MDN: uwagi dotyczące użycia dir.

Wypróbuj kompletną stronę porównawczą na Macu

Zapisz poniższy kompletny dokument jako direction-demo.html w edytorze zwykłego tekstu, a następnie otwórz plik w przeglądarce. Zawiera sztuczne etykiety i prostokąty utworzone w CSS, bez zewnętrznych zależności. Oczekiwane wyniki wynikają z udokumentowanych reguł; przykład nie jest przedstawiany jako przetestowany w przeglądarce.

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

Porównaj cztery wiersze z tabelą przewidywań. Wszystkie zawierają tę samą kolejność źródłową. Różnią się jedynie kierunkiem kontenera i klasą odwracającą. Jawne ustawienie poziomego trybu pisma pozwala skupić się w tym przykładzie na typowym układzie poziomym na komputerze.

Następnie zmień tylko justify-content: flex-start na justify-content: flex-end, zapisz plik i wczytaj go ponownie. Grupy powinny przesunąć się na przeciwległe końce osi głównej, zachowując kierunek przepływu elementów w każdym wierszu. Dzięki temu można oddzielić pozycjonowanie od odwracania bez wprowadzania kolejnego ustawienia kierunku tekstu. MDN: justify-content.

Na koniec przywróć ustawienie wyrównania i dodaj kropkę po Alpha w każdym wierszu. Porównaj zarówno interpunkcję, jak i położenie kafelków. To poglądowa próba kierunku tekstu, a nie zalecenie, by przypisywać rtl zwykłym angielskim etykietom. Wyjaśnienie MDN dotyczące podstawowego kierunku tekstu pokazuje, dlaczego warto osobno sprawdzić interpunkcję na granicach. MDN: dir.

Diagnozuj nieoczekiwane wyniki w rzeczywistym układzie

Upewnij się, że element nadrzędny jest kontenerem flex

Sprawdź element zawierający kafelki. flex-direction działa, gdy jego display ma wartość flex lub inline-flex. Deklaracja w zwykłym kontenerze blokowym nie utworzy układu flex. Sprawdź również, czy późniejsza reguła nie zmienia efektywnej wartości przy bieżącej szerokości okna przeglądarki. MDN: opis flex-direction.

Sprawdź dziedziczony kierunek, zanim dodasz kolejne odwrócenie

Sprawdź kontener i jego elementy nadrzędne pod kątem dir, a następnie znajdź deklaracje CSS direction. Gdy pominięto dir, kierunek jest zazwyczaj dziedziczony po elemencie nadrzędnym; pominięcie nie oznacza automatycznego wykrywania. Jeśli kolejność źródłowa niespodziewanie zaczyna się po prawej, przyczyną może być dziedziczony kierunek. MDN: dziedziczenie dir.

Unikaj używania dir="auto" jako przełącznika układu. WHATWG definiuje go jako wykrywanie kierunku na podstawie treści, przede wszystkim z użyciem pierwszego znaku o silnym kierunku, i zaleca stosowanie go wyłącznie wtedy, gdy kierunek tekstu jest rzeczywiście nieznany. Wymaganie dotyczące układu nie powinno zależeć od tego, która etykieta akurat pojawi się jako pierwsza. Standard HTML: atrybut dir.

Rozróżnij odwrócenie elementów od odwrócenia wierszy

Jeśli problem pojawia się wyłącznie po zwężeniu okna, sprawdź zawijanie. row-reverse zmienia kierunek przepływu wzdłuż osi głównej; wrap-reverse zmienia kierunek układania wierszy flex. Domyślna wartość nowrap zachowuje jeden wiersz i może powodować przepełnienie. To odrębne ustawienia, więc sprawdź zarówno wąskie okno, jak i początkową szerokość pulpitu. MDN: flex-wrap.

Sprawdź indywidualne reguły kolejności

Sprawdź, czy któryś kafelek ma wartość order. Układ flex grupuje elementy według tej liczby całkowitej, w kolejności od najniższej wartości, a w grupach o jednakowej wartości zachowuje kolejność źródłową. Odwrócenie zmienia następnie kierunek układania tak uzyskanej sekwencji. Zresetuj nieoczekiwane ustawienia kolejności poszczególnych elementów, zanim uznasz, że kierunek kontenera jest błędny. MDN: kolejność elementów flex.

Sprawdź kolejność czytania, zanim zachowasz zmianę

W przypadku neutralnych kafelków dekoracyjnych odwrócenie wizualne może być jedynym wymaganiem. W przypadku linków lub elementów sterujących sprawdź kolejność w kodzie źródłowym i prześledź nawigację fokusem klawiatury w komponencie. Samo odwrócenie flex nie zmienia kolejności nawigacji sekwencyjnej ani kolejności odczytu przez syntezator mowy. Wizualnie odwrócona grupa może więc zachować pierwotną kolejność interakcji. W3C: kierunek przepływu w flex.

Na podstawie tej kontroli zdecyduj, czy należy zmienić kod źródłowy. Jeśli zamierzona znacząca kolejność to Gamma, Beta, Alpha, umieść elementy w tej kolejności. Jeśli Alpha, Beta, Gamma pozostaje prawidłową kolejnością czytania, a odwrócenia wymaga jedynie prezentacja, oceń układ wizualny z uwzględnieniem tej różnicy. MDN pokazuje zachowanie kolejności źródłowej na przykładzie linków, na których można ustawić fokus. MDN: kolejność elementów flex.

Dobieraj mechanizm do wymagania: HTML dir określa podstawowy kierunek tekstu, flex-direction — przepływ wzdłuż osi flex, a wyrównanie pozycjonuje niezmienioną sekwencję. Zanim zachowasz wynik, osobno porównaj położenie kafelków, interpunkcję, zawijanie i kolejność źródłową. Dzięki temu uzyskasz powtarzalny sposób rozwiązywania problemów z układem, który tylko wygląda na odwrócony.

Źródła