Artikel ini akan menerangkan kaedah untuk menetapkan asas-flex dalam Tailwind CSS.
Bagaimana untuk Menetapkan Asas Flex dalam Tailwind?
Untuk menetapkan asas-flex dalam Tailwind CSS, buat fail HTML. Kemudian, gunakan ' asas-
Lihat langkah-langkah yang disediakan untuk demonstrasi praktikal:
Langkah 1: Tetapkan Asas Flex dalam Program HTML
Buat program HTML dan gunakan ' asas-
< badan >
< div kelas = 'flex h-20' >
< div kelas = 'asas-1/4 bg-merah-400 m-1' > 1 < / div >
< div kelas = 'asas-1/3 bg-teal-400 m-1' > 2 < / div >
< div kelas = 'asas-1/2 bg-oren-400 m-1' > 3 < / div >
< / div >
< / badan >
di sini:
- “ lentur ” kelas digunakan untuk mencipta susun atur yang fleksibel dan melaraskan saiz elemen kanak-kanak berdasarkan ruang yang tersedia.
- “ h-20 kelas ” menetapkan ketinggian kepada 20 unit.
- “ asas-1/4 kelas ” menetapkan lebar elemen
dalaman kepada 25% daripada elemen induknya.- “ asas-1/3 kelas ” menetapkan lebar
dalam kepada 33.33% daripada bekas induknya.- “ asas-1/2 ” kelas menetapkan lebar
kepada 50% daripada bekas induknya.- “ bg-merah-400 ” kelas menggunakan warna latar belakang merah pada
.- “ bg-teal-400 ” kelas menetapkan warna teal kepada latar belakang
.- “ bg-oren-400 ” kelas menggunakan warna latar belakang oren pada
.- “ m-1 kelas ” menambah margin 1 unit di sekeliling setiap elemen
.Langkah 2: Sahkan Output
Untuk memastikan bahawa asas-flex telah ditetapkan dan berfungsi dengan betul, lihat halaman web HTML:
Dalam keluaran di atas, asas-flex boleh dilihat mengikut yang digayakan.
Kesimpulan
Asas fleksibel membolehkan pengguna membuat susun atur fleksibel yang disesuaikan dengan pelbagai saiz dan resolusi skrin. Untuk menetapkan asas-flex dalam Tailwind CSS, ' asas-
” kelas utiliti digunakan dalam program HTML. Pengguna perlu menentukan saiz item fleksibel dan memastikan perubahan dengan melihat halaman web. Artikel ini telah menerangkan kaedah untuk menetapkan asas-flex dalam Tailwind CSS. - “ asas-1/4 kelas ” menetapkan lebar elemen