Gunakan HTML dir untuk menetapkan arah teks asas dan CSS flex-direction: row-reverse untuk membalikkan aliran baris flex. Apabila mengatur kad pada halaman awam dari Mac anda, tentukan terlebih dahulu sama ada anda perlu menukar arah teks, urutan item, atau penjajaran.

Panduan ini mengandaikan anda menyunting HTML dan CSS halaman dalam editor teks dan mempratinjanya dalam pelayar desktop. Tugasannya ialah mengatur tiga jubin neutral—Alpha, Beta, dan Gamma—sementara mengekalkan tingkah laku teks dan urutan dokumen yang sengaja.

Apakah yang sebenarnya diubah oleh setiap tetapan arah?

Atribut dir HTML menerangkan arah asas teks suatu unsur. Nilai eksplisitnya ialah ltr dan rtl; auto meminta pelayar menentukan arah dari kandungan. WHATWG menggalakkan penulis mengekspresikan arah teks melalui HTML supaya maklumat itu kekal tersedia tanpa CSS. Standard HTML: Atribut dir.

CSS direction juga mengawal arah teks asas dan menyertai tingkah laku layout. Ia diwarisi, jadi menetapkan direction: rtl pada bekas boleh mempengaruhi keturunannya. MDN menasihatkan menggunakan HTML dir sekadar mungkin. Anggap penimpaan arah CSS sebagai keputusan arah teks yang sengaja, bukannya cara mudah untuk memindahkan kotak. MDN: direction.

CSS flex-direction mengawal paksi utama bekas flex. row mengikuti paksi inline mod penulisan semasa; row-reverse menukar arah main-start dan main-end. Ia menukar arah item disusun, manakala mengekalkan urutan sumber mereka. W3C: Arah Aliran Flex.

Mekanisme ini saling berinteraksi. Dengan penulisan horizontal, baris flex ltr bermula di kiri, manakala baris flex rtl bermula di kanan. Menambah row-reverse membalikkan sama ada arah permulaan. Oleh itu, row-reverse tidak selalu bermaksud item pertama muncul di kanan. MDN: flex-direction.

Tetapan mana yang sepadan dengan keputusan yang anda mahu?

Sebelum menyunting, tuliskan keputusan yang dikehendaki dalam terma konkret: "Mengekalkan label Inggeris tidak berubah, letakkan jubin dalam urutan visual terbalik, dan kekal kan kumpulan di kanan." Pernyataan itu mengenal pasti keputusan berasingan tentang teks, aliran item, dan penjajaran.

Keputusan yang dikehendaki Titik permulaan yang sesuai Apa yang perlu diperiksa
Tetapkan arah teks asas kandungan HTML dir="ltr" atau dir="rtl" Terapkan ke skop yang teksnya memerlukan arah itu.
Balikkan setiap progres visual item dalam baris flex flex-direction: row-reverse Semak arah bekas sedia ada terlebih dahulu.
Pindahkan baris tidak berubah ke tepi main-end justify-content: flex-end Pastikan ruang bebas wujud untuk penjajaran.
Tukar urutan bermakna di mana-mana Susun semula unsur sumber Sahkan bahawa urutan bacaan yang enak masuk akal.
Letakkan item terpilih secara visual Nilai order individu Kaji perbezaan antara urutan visual dan sumber.

Perbezaan antara pembalikan dan penjajaran penting. Dengan baris ltr, justify-content: flex-end boleh meletakkan Alpha, Beta, dan Gamma bersama di kanan tanpa membalikkan urutan mereka. Penjajaran mengagihkan ruang paksi utama yang ada; flex-end merujuk ke sisi main-end bekas flex. Kesannya boleh hilang apabila item fleksibel menggunakan ruang itu. MDN: justify-content.

Bagi urutan yang pembaca mesti jumpai dalam urutan tertentu, tetapkan urutan itu dalam dokumen sendiri. W3C dengan jelas mengingatkan jangan menggunakan pembalikan flex atau order untuk menampung kesilapan pengekodan sumber. W3C: Pengekodan dan Orientasi.

Ramal keempat-empat kombinasi sebelum menukar halaman

Perbandingan berikut berasal dari peraturan paksi yang didokumenkan. Ia mengandaikan writing-mode: horizontal-tb, satu baris flex, nilai order sama, dan urutan sumber Alpha, Beta, Gamma. "Penampilan kiri-ke-kanan" menerangkan kedudukan fizikal jubin di skrin.

Arah bekas Arah flex Jubin pertama bermula di Penampilan kiri-ke-kanan
ltr row Kiri Alpha, Beta, Gamma
ltr row-reverse Kanan Gamma, Beta, Alpha
rtl row Kanan Gamma, Beta, Alpha
rtl row-reverse Kiri Alpha, Beta, Gamma

Baris kedua dan ketiga boleh nampak serupa apabila kandungan mereka adalah persegi panjang mudah. Tetapi tetapan arah teks mereka berbeza. Kombinasi keempat menjelaskan kejutan biasa: menggunakan kedua-dua rtl dan row-reverse menghasilkan progres item kiri-ke-kanan. MDN mendokumenkan tingkah laku bergantung-arah ini. MDN: flex-direction.

Arah teks asas juga mempengaruhi tanda baca dan urutan larian teks berarah. Menetapkan rtl tidak sekadar membalikkan setiap aksara dalam perkataan Inggeris. Label boleh tetap dikenal pasti manakala tanda bacanya muncul di kedudukan tidak dijangka. Itu menjadikan jubin biasa berguna untuk mengkaji penempatan kotak, tetapi tidak mencukupi untuk menilai tingkah laku teks. MDN: catatan penggunaan dir.

Cuba halaman perbandingan lengkap pada Mac anda

Simpan dokumen lengkap berikut sebagai direction-demo.html menggunakan editor teks biasa, lalu buka fail di pelayar anda. Ia menggunakan label sintetik dan persegi panjang CSS, tanpa kebergantungan luaran. Keputusan yang dijangka mengikuti peraturan yang didokumenkan; contoh ini tidak dibentangkan sebagai keputusan yang diuji pelayar.

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

Bandingkan keempat-empat baris dengan jadual ramalan. Kesemua mengandungi urutan sumber yang sama. Hanya arah bekas dan kelas pembalikan mereka yang berbeza. Mod penulisan horizontal yang eksplisit mengekalkan demonstrasi ini tertumpu pada kes desktop horizontal biasa.

Seterusnya, tukar hanya justify-content: flex-start kepada justify-content: flex-end, simpan, dan muat semula. Kumpulan sepatutnya berpindah ke tepi paksi utama yang bertentangan sambil mengekalkan progres item setiap baris. Ini memisahkan penempatan daripada pembalikan tanpa memperkenalkan tetapan arah teks lain. MDN: justify-content.

Akhir sekali, kembalikan tetapan penjajaran dan tambahkan noktah selepas Alpha di setiap baris. Bandingkan tanda baca serta kedudukan jubin. Ini adalah sonar arah teks ilustratif, bukan cadangan untuk mengumpuk rtl kepada label Inggeris biasa. Penjelasan MDN tentang arah asas menerangkan mengapa tanda baca sempadan layak mendapat semak sendiri. MDN: dir.

Diagnosa keputusan tidak dijangka dalam layout sebenar

Sahkan bahawa induk ialah bekas flex

Semak unsur yang mengandungi jubin. flex-direction digunakan apabila display nya ialah flex atau inline-flex. Perisytiharan pada bekas blok biasa tidak akan mewujudkan layout flex. Semak juga sama ada peraturan kemudian menukar nilai berkesan pada lebar pelayar semasa. MDN: perihalan flex-direction.

Semak arah diwarisi sebelum menambah pembalikan lain

Periksa bekas dan nenek moyangnya untuk dir, lalu semak perisytiharan CSS direction. Apabila dir dilucutkan, arah umumnya diwarisi dari induk; pelucutan tidak meminta pengesanan automatik. Jika urutan sumber tidak dijangka bermula di kanan, arah diwarisi boleh menjelaskannya. MDN: pewarisan dir.

Elakkan menggunakan dir="auto" sebagai suis layout. WHATWG mentakrifkannya melalui pengesanan arah berasaskan kandungan, terutamanya menggunakan aksara berarah pertama yang kuat, dan menasihatkan menyimpannya untuk arah teks yang benar-benar tidak diketahui. Keperluan layout sepatutnya tidak bergantung pada label mana yang muncul pertama. Standard HTML: Atribut dir.

Pisahkan pembalikan item daripada pembalikan baris

Jika masalah hanya muncul selepas tetingkap disempitkan, periksa pembungkusan. row-reverse menukar progres paksi utama; wrap-reverse menukar arah baris flex ditumpuk. Lalai nowrap mengekalkan satu baris dan boleh membenarkan luapan. Kawalan ini berasingan, jadi uji tetingkap sempit serta lebar desktop awal. MDN: flex-wrap.

Cari peraturan pengekodan individu

Semak sama ada sebarang jubin mempunyai nilai order. Layout flex mengumpulkan item oleh integer itu, terendah pertama, dan mengekalkan urutan sumber dalam kumpulan bernilai sama. Pembalikan kemudian menukar arah dari mana urutan keputusan itu dilaksanakan. Set semula pengekodan item tidak dijangka sebelum memutuskan bahawa arah bekas adalah salah. MDN: Menguruskan item flex.

Semak urutan bacaan sebelum mengekalkan perubahan

Bagi jubin hiasan neutral, pembalikan visual mungkin sahaja keperluan. Bagi pautan atau kawalan, periksa urutan dalam sumber dan ikuti fokus papan kunci melalui komponen. Pembalikan flex sendiri tidak menukar urutan navigasi berurutan atau ucapan. Kumpulan yang dibalikkan secara visual boleh mengekalkan urutan interaksi asalnya. W3C: Arah Aliran Flex.

Gunakan semakan itu untuk memutuskan sama ada sumber patut ditukar. Jika Gamma, Beta, Alpha ialah urutan bermakna yang dikehendaki, letakkan unsur dalam urutan itu. Jika Alpha, Beta, Gamma kekal urutan bacaan yang betul dan hanya persembahan perlu dibalikkan, nilai susunan visual dengan perbezaan itu dalam fikiran. MDN mendemonstrasikan tingkah laku urutan sumber dengan pautan boleh difokuskan. MDN: Menguruskan item flex.

Pilih mekanikut mengikut keperluan: HTML dir untuk arah teks asas, flex-direction untuk aliran paksi flex, dan penjajaran untuk penempatan urutan tidak berubah. Sebelum mengekalkan keputusan, bandingkan penempatan jubin, tanda baca, pembungkusan, dan urutan sumber secara berasingan. Itu memberi anda cara yang boleh diulang untuk menyelesaikan layout yang nampak terbalik sahaja.

Sumber