Tailwind CSS menawarkan berbagai “ menyelaraskan-item ” utilitas untuk mengontrol posisi item fleksibel dan kisi di sepanjang sumbu penampung. Kelas utilitas ini termasuk 'item-start', 'items-center', 'items-end', 'items-baseline', dan 'items-stretch'. Selain itu, pengguna juga dapat memanfaatkan breakpoint dan kueri media pada utilitas 'items-
Artikel ini akan menunjukkan metode penerapan breakpoint dan kueri media pada utilitas “align-items” di Tailwind.
Bagaimana Cara Menerapkan Breakpoints dan Media Queries Dengan “align-items” di Tailwind?
Untuk menerapkan breakpoint dan kueri media yang diinginkan pada utilitas “justify-content” di Tailwind, buat struktur HTML. Setelah itu, tentukan nilai spesifik ke “ item-
Contoh
Dalam contoh ini, kami akan membuat wadah fleksibel dengan properti 'items-start'. Kami akan menggunakan ' md ' breakpoint dengan ' item-pusat ” utilitas dan “ lg ' breakpoint dengan ' item-akhir ” utilitas di “ Keluaran Untuk menerapkan breakpoint dan kueri media dengan utilitas “align-items” di Tailwind, tentukan nilai yang diinginkan ke “ item-
< tubuh >
< div kelas = 'item fleksibel-mulai md:item-center lg:item-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div kelas = 'bg-merah muda-600 py-4 w-40' > 1 div >
< div kelas = 'bg-merah muda-600 py-12 w-40' > 2 div >
< div kelas = 'bg-merah muda-600 py-8 w-40' > 3 div >
div >
tubuh >
Di Sini:
Output di atas menunjukkan bahwa perataan vertikal item fleksibel berubah karena ukuran layar bervariasi. Ini menunjukkan bahwa titik henti sementara dan kueri media yang ditentukan telah diterapkan secara efektif dengan utilitas 'align-items'. Kesimpulan