Artikel ini akan menjelaskan metode untuk mengatur basis fleksibel di Tailwind CSS.
Bagaimana cara mengatur Flex Basis di Tailwind?
Untuk menyetel basis fleksibel di Tailwind CSS, buat file HTML. Kemudian, gunakan “ basis-
Lihatlah langkah-langkah yang diberikan untuk demonstrasi praktis:
Langkah 1: Tetapkan Flex Basis dalam Program HTML
Buat program HTML dan gunakan tombol “ basis-
< tubuh >
< div kelas = 'fleksibel h-20' >
< div kelas = 'basis-1/4 bg-merah-400 m-1' > 1 < / div >
< div kelas = 'basis-1/3 bg-teal-400 m-1' > 2 < / div >
< div kelas = 'dasar-1/2 bg-oranye-400 m-1' > 3 < / div >
< / div >
< / tubuh >
Di Sini:
- “ melenturkan ” digunakan untuk membuat tata letak yang fleksibel dan menyesuaikan ukuran elemen turunan berdasarkan ruang yang tersedia.
- “ h-20 ” kelas mengatur ketinggian menjadi 20 unit.
- “ dasar-1/4 ” mengatur lebar elemen
dalam menjadi 25% dari elemen induknya.- “ basis-1/3 ” class menyetel lebar
bagian dalam menjadi 33,33% dari wadah induknya.- “ dasar-1/2 ” mengatur lebar
menjadi 50% dari wadah induknya.- “ bg-merah-400 ” kelas menerapkan warna latar belakang merah ke
.- “ bg-teal-400 ” mengatur warna teal ke latar belakang
.- “ bg-oranye-400 ” kelas menerapkan warna latar belakang oranye ke
.- “ m-1 ” kelas menambahkan margin 1 unit di sekitar setiap elemen
.Langkah 2: Verifikasi Keluaran
Untuk memastikan bahwa basis fleksibel telah disetel dan berfungsi dengan baik, lihat halaman web HTML:
Pada output di atas, dasar-fleksibel dapat dilihat sesuai dengan gayanya.
Kesimpulan
Basis fleksibel memungkinkan pengguna membuat tata letak fleksibel yang menyesuaikan dengan berbagai ukuran dan resolusi layar. Untuk menyetel basis fleksibel di Tailwind CSS, tombol “ basis-
” kelas utilitas digunakan dalam program HTML. Pengguna perlu menentukan ukuran item fleksibel dan memastikan perubahan dengan melihat halaman web. Artikel ini telah menjelaskan metode untuk mengatur basis fleksibel di Tailwind CSS. - “ dasar-1/4 ” mengatur lebar elemen