Penomoran Manual dengan Flex (Nomor 1 atau 2 Digit dan Sub/Sup)

Baris kedua dari setiap item akan sejajar persis dengan huruf pertama setelah nomor, baik nomor 1 digit (1,2,3) maupun 2 digit (10, 11). Juga mendukung _subscript dan ^superscript di dalam teks panjang. CSS yang digunakan seperti berikut:

  <style>
  /* Gaya list dengan flex */
  .manual-list {
       display: flex;
       margin-bottom: 1rem;
       line-height: 1.5;  /* konsisten tinggi baris walau mengandung sub/sup */
   }

   .number {
       flex-shrink: 0; /* nomor tidak mengecil */
       margin-right: 0.65rem;  /* spasi antara nomor dan teks */
       color: blue;
    }

    .text {
        flex: 1;  /* teks mengambil sisa ruang */
     }
    </style>
    
    Contoh Penggunaan:
        <!-- Item 2: nomor 1 digit, mengandung sub dan sup -->
    <div class="manual-list">
        <div class="number">2.</div>
        <div class="text">
            Mekanisme reaksi S<sub>N</sub>2 pada karbon primer ditandai dengan serangan nukleofil dari belakang, menghasilkan inversi konfigurasi. Contoh: CH<sub>3</sub>Br + OH<sup>−</sup> → CH<sub>3</sub>OH + Br<sup>−</sup>. Penjelasan ini cukup panjang sehingga harus turun ke baris kedua. Lihat, posisi awal baris kedua tetap sejajar dengan 'M' dari kata 'Mekanisme'.
        </div>
    </div>

    <!-- Item 10: nomor 2 digit, teks panjang, tanpa sub/sup -->
    <div class="manual-list">
        <div class="number">10.</div>
        <div class="text">
            Reaksi eliminasi E1 dan E2 pada alkil halida tersier seringkali bersaing dengan substitusi. Faktor-faktor seperti kekuatan basa, suhu, dan sterik sangat mempengaruhi hasil akhir. Sekalipun nomor "10." lebih lebar dari nomor "1.", teks tetap rapi karena menggunakan flex. Coba perhatikan baris kedua dan seterusnya sejajar sempurna dengan 'R' dari 'Reaksi'.
        </div>
    </div>

Contoh hasil seperti penomoran berikut.

1.

Reaksi-reaksi dalam kimia organik, kajian mekanistik yang sangat mendalam mencakup pemutusan ikatan kovalen secara homolitik maupun heterolitik. Teks ini sengaja dibuat panjang agar turun ke baris kedua, ketiga, atau lebih. Perhatikan bahwa baris kedua dimulai tepat sejajar dengan huruf 'R' dari kata 'Reaksi'.

2.

Mekanisme reaksi S_N2 pada karbon primer ditandai dengan serangan nukleofil dari belakang, menghasilkan inversi konfigurasi. Contoh: CH₃Br + OH⁻ → CH₃OH + Br⁻. Penjelasan ini cukup panjang sehingga harus turun ke baris kedua. Lihat, posisi awal baris kedua tetap sejajar dengan 'M' dari kata 'Mekanisme'.

10.

Reaksi eliminasi E1 dan E2 pada alkil halida tersier seringkali bersaing dengan substitusi. Faktor-faktor seperti kekuatan basa, suhu, dan sterik sangat mempengaruhi hasil akhir. Sekalipun nomor "10." lebih lebar dari nomor "1.", teks tetap rapi karena menggunakan flex. Coba perhatikan baris kedua dan seterusnya sejajar sempurna dengan 'R' dari 'Reaksi'.

11.

Dalam reaksi adisi elektrofilik pada alkena, terbentuk karbokation sebagai intermediet. Contoh: C₂H₄ + H⁺ → C₂H₅⁺. Karbokation ini kemudian bereaksi dengan nukleofil seperti H₂O atau Cl⁻. Penjelasan detail ini cukup panjang hingga dua baris untuk menguji kesejajaran teks dengan adanya sub/sup. Tidak ada pergeseran posisi awal baris kedua meskipun ada banyak tag <sub> dan <sup>.

3.

Reaksi oksidasi alkohol menggunakan K₂Cr₂O₇ dalam medium H₂SO₄ menghasilkan aldehid atau keton. Alkohol primer dioksidasi menjadi aldehid, lalu lebih lanjut menjadi asam karboksilat. Alkohol sekunder menjadi keton, sedangkan alkohol tersier tidak bereaksi. Baris kedua tetap sejajar sempurna dengan 'R' dari 'Reaksi', meskipun nomor "3." lebih pendek.

---

✅ Penjelasan teknis:
Menggunakan display: flex dengan kolom nomor (.number) dan teks (.text). flex-shrink: 0 pada nomor agar lebarnya sesuai konten (baik "1." maupun "10."). flex: 1 pada teks membuat teks mengambil sisa lebar, dan secara otomatis seluruh baris dalam satu blok teks akan rata kiri sejajar dengan huruf pertama setelah nomor. Sub/sup tidak merusak tata letak karena berada di dalam .text dan hanya mempengaruhi tinggi baris secara minimal, tetapi tidak menggeser posisi horizontal.