Artikel ini akan mengilustrasikan metode untuk mengurutkan item flex dan grid di Tailwind CSS.
Bagaimana Cara Memesan Item Flex dan Grid di Tailwind?
Untuk mengurutkan item fleksibel dan kisi di Tailwind CSS, buat file HTML. Kemudian, gunakan utilitas 'pesanan-' dan tentukan nilai pesanan dalam program HTML untuk mengubah urutan item fleksibel dan kisi. Ini memungkinkan item fleksibel dirender dalam urutan yang berbeda dari yang ditampilkan di DOM (Document Object Model). Untuk memastikan perubahan, lihat halaman web HTML.
Lihatlah langkah-langkah yang diberikan untuk pemahaman yang lebih baik:
Langkah 1: Pesan Item Flex dan Grid di Program HTML
Buat program HTML dan gunakan tombol “ pesanan-
< tubuh >
< div kelas = 'fleksibel h-20' >
< div kelas = 'pesanan-3 bg-merah-500 w-32 m-1' > 1 < / div >
< div kelas = 'pesanan-terakhir bg-kuning-500 w-32 m-1' > 2 < / div >
< div kelas = 'pesan pertama bg-teal-500 w-32 m-1' > 3 < / div >
< div kelas = 'pesanan-2 bg-oranye-500 w-32 m-1' > 4 < / div >
< / div >
< / tubuh >
Di Sini:
- “ pesanan-3 ” class mengatur urutan elemen menjadi 3 dan item fleksibel akan diposisikan sebagai item ketiga dalam wadah fleksibel.
- “ urutan terakhir ” kelas mengatur urutan elemen menjadi yang terakhir dan itu akan menjadi item terakhir dalam wadah fleksibel.
- “ urutan pertama ” class menentukan urutan elemen menjadi yang pertama dan akan diposisikan sebagai item pertama dalam wadah fleksibel.
- “ pesanan-2 ” kelas mengatur urutan elemen menjadi 2 dan akan diposisikan sebagai item kedua dalam wadah fleksibel.
- “ w-32 ” kelas menerapkan 32 unit lebar untuk setiap item fleksibel.
- “ m-1 ” kelas menambahkan 1 unit margin di sekitar setiap item fleksibel.
Langkah 2: Verifikasi Keluaran
Lihat halaman web HTML untuk memastikan bahwa item flex dan grid telah dipesan:
Dapat diamati bahwa item flex dan grid telah berhasil dipesan sesuai dengan yang ditentukan.
Kesimpulan
Untuk mengurutkan item fleksibel dan petak di Tailwind CSS, gunakan tombol “ pesanan-