Tailwind CSS menawarkan pelbagai “ align-item ” utiliti untuk mengawal kedudukan item lentur dan grid di sepanjang paksi silang bekas. Kelas utiliti ini termasuk 'item-start', 'item-center', 'item-end', 'item-baseline' dan 'item-regangan'. Selain itu, pengguna juga boleh menggunakan titik putus dan pertanyaan media pada utiliti 'item-
Artikel ini akan menunjukkan kaedah menggunakan titik putus dan pertanyaan media pada utiliti 'selaras-item' dalam Tailwind.
Bagaimana untuk Memohon Titik Putus dan Pertanyaan Media Dengan 'align-item' dalam Tailwind?
Untuk menggunakan titik putus yang diingini dan pertanyaan media pada utiliti 'justify-content' dalam Tailwind, buat struktur HTML. Selepas itu, tentukan nilai khusus kepada ' item-
Contoh
Dalam contoh ini, kami akan mencipta bekas fleksibel dengan sifat 'item-start'. Kami akan menggunakan ' md ” titik putus dengan “ pusat barang ' utiliti dan ' lg ” titik putus dengan “ item-akhir ' utiliti dalam ' Pengeluaran Untuk menggunakan titik putus dan pertanyaan media dengan utiliti 'align-item' dalam Tailwind, tentukan nilai yang dikehendaki pada ' item-
< badan >
< div kelas = 'item flex-mulakan md:item-pusat lg:item-end justify-sekitar pusat-teks h-44 m-3 bg-pink-300 gap-4' >
< div kelas = 'bg-pink-600 py-4 w-40' > 1 div >
< div kelas = 'bg-merah jambu-600 py-12 w-40' > 2 div >
< div kelas = 'bg-merah jambu-600 py-8 w-40' > 3 div >
div >
badan >
di sini:
Output di atas menunjukkan bahawa penjajaran menegak item flex berubah kerana saiz skrin berbeza-beza. Ini menunjukkan bahawa titik putus yang ditentukan dan pertanyaan media telah digunakan dengan berkesan dengan utiliti 'item sejajar'. Kesimpulan