Artikel ini akan menggambarkan kaedah untuk memesan item flex dan grid dalam Tailwind CSS.
Bagaimana untuk Memesan Item Flex dan Grid dalam Tailwind?
Untuk memesan item flex dan grid dalam Tailwind CSS, buat fail HTML. Kemudian, gunakan utiliti 'pesanan-' dan nyatakan nilai pesanan dalam program HTML untuk menukar susunan item flex dan grid. Ia membenarkan item flex untuk diberikan dalam susunan yang berbeza daripada yang dipaparkan dalam DOM (Model Objek Dokumen). Untuk memastikan perubahan, lihat halaman web HTML.
Lihat langkah-langkah yang diberikan untuk pemahaman yang lebih baik:
Langkah 1: Pesan Item Flex dan Grid dalam Program HTML
Buat program HTML dan gunakan ' pesanan-
< badan >
< div kelas = 'flex h-20' >
< div kelas = 'pesanan-3 bg-merah-500 w-32 m-1' > 1 < / div >
< div kelas = 'pesanan-bg-kuning terakhir-500 w-32 m-1' > 2 < / div >
< div kelas = 'pesanan-pertama bg-teal-500 w-32 m-1' > 3 < / div >
< div kelas = 'pesanan-2 bg-oren-500 w-32 m-1' > 4 < / div >
< / div >
< / badan >
di sini:
- “ pesanan-3 ” kelas menetapkan susunan elemen kepada 3 dan item flex akan diletakkan sebagai item ketiga dalam bekas flex.
- “ pesanan-terakhir ” kelas menetapkan susunan elemen menjadi yang terakhir dan ia akan menjadi item terakhir dalam bekas flex.
- “ pesanan-dahulu ” kelas menentukan susunan elemen untuk menjadi yang pertama dan ia akan diletakkan sebagai item pertama dalam bekas flex.
- “ pesanan-2 ” kelas menetapkan susunan elemen kepada 2 dan ia akan diletakkan sebagai item kedua dalam bekas flex.
- “ w-32 ” kelas menggunakan 32 unit lebar untuk setiap item flex.
- “ m-1 ” kelas menambah margin 1 unit di sekeliling setiap item fleksibel.
Langkah 2: Sahkan Output
Lihat halaman web HTML untuk memastikan item flex dan grid telah dipesan:
Ia boleh diperhatikan bahawa item flex dan grid telah berjaya dipesan mengikut mana ia telah ditentukan.
Kesimpulan
Untuk memesan item flex dan grid dalam Tailwind CSS, gunakan ' pesanan-