Flexbox atau bekas flex ialah reka letak yang membolehkan pengguna menjajarkan dan mengedarkan elemen dalam bekas. Tailwind CSS menawarkan pelbagai kelas utiliti untuk mencipta dan bekerja dengan flexbox. Bekas lentur aras kotak ialah bekas lentur yang berkelakuan/bertindak seperti elemen tahap blok dan mencipta blok. Ia mengambil keseluruhan lebar elemen induknya dan membuat baris baharu selepas dirinya.
Tulisan ini akan menjadi contoh kaedah mencipta bekas flex peringkat blok dalam Tailwind.
Bagaimana untuk Mencipta/Membuat Bekas Flex Tahap Blok dalam Tailwind?
Untuk mencipta bekas flex peringkat blok tertentu dalam Tailwind, buat struktur HTML. Kemudian, tambahkan ' lentur ” kelas utiliti dengan
Sintaks
< div kelas = 'flex ...' >
...
div >
Kod
< badan >
< div kelas = 'jurang lentur-2 m-2 sempadan-2 sempadan-hitam' >
< div kelas = 'bg-kuning-500 p-4' > Item Pertama div >
< div kelas = 'bg-kuning-500 p-4' > Perkara Kedua div >
< div kelas = 'bg-kuning-500 p-4' > Perkara Ketiga div >
div >
badan >
Di sini, dalam bekas
-
- “ lentur ” kelas digunakan untuk mencipta bekas flex peringkat blok.
- “ jurang-2 ” kelas menambah 2 unit jarak antara elemen anak flex.
- “ m-2 ” kelas menambah 2 unit margin pada semua sisi bekas.
- “ sempadan-2 ” kelas menambah sempadan pada bekas dengan 2 unit lebar.
- “ hitam sempadan ” kelas menetapkan warna sempadan kepada hitam.
Dalam elemen flex kanak-kanak:
-
- “ bg-kuning-500 ” kelas menggunakan warna kuning pada latar belakang item fleksibel.
- “ p-4 ” kelas menambah padding 4 unit pada semua sisi item flex.
Pengeluaran
Dalam output di atas, sempadan mewakili bahawa bekas itu ialah bekas fleksibel peringkat blok, yang menduduki keseluruhan lebar elemen induknya (penyemak imbas).
Sebagai alternatif, pengguna boleh memastikan ini dengan memeriksa elemen bekas flex pada halaman web:
Output di atas menunjukkan bahawa bekas adalah bekas flex peringkat blok.
Kesimpulan:
Untuk mencipta bekas flex peringkat blok dalam Tailwind, anda perlu menambah ' lentur ” kelas utiliti dengan bekas tertentu dan nyatakan elemen anaknya. Pengguna boleh menentukan dan mengubah suai item fleksibel mengikut keperluan mereka. Untuk pengesahan, tambahkan jidar pada bekas dan lihat halaman web atau periksa elemen tersebut pada halaman web. Artikel ini telah menerangkan kaedah mencipta bekas flex peringkat blok dalam Tailwind.