Bagaimana untuk Memohon Titik Putus dan Pertanyaan Media dengan 'justify-content' dalam Tailwind?

” elemen untuk menukar penjajaran mendatar itemnya pada saiz skrin sederhana dan besar:

< badan >

< div kelas = 'flex justify-start md:justify-antara lg:justify-end gap-3 m-3 bg-teal-700' >
< div kelas = 'bg-kuning-400 w-24 j-12' > 1 < / div >
< div kelas = 'bg-kuning-400 w-24 j-12' > 2 < / div >
< div kelas = 'bg-kuning-400 w-24 j-12' > 3 < / div >

< / div >

< / badan >

di sini:

• “justify-start” kelas menjajarkan item flex pada permulaan paksi utama bekas.
• “md:justify-antara” kelas mengedarkan item flex sepanjang paksi utama bekas dengan jarak yang sama antara item pada saiz skrin sederhana.
• “lg:justify-end” kelas menjajarkan item fleksibel di hujung paksi utama bekas pada saiz skrin yang besar.

Pengeluaran

---

---

Output di atas menunjukkan bahawa penjajaran mendatar bagi item flex berubah kerana saiz skrin berbeza-beza. Ini menunjukkan bahawa titik putus yang ditentukan dan pertanyaan media telah digunakan dengan berkesan dengan utiliti 'justify-content'.

Kesimpulan

Untuk menggunakan titik putus dan pertanyaan media dengan utiliti 'justify-content' dalam Tailwind, tentukan nilai yang dikehendaki pada “justify-” utiliti untuk pelbagai saiz skrin dengan menggunakan ' md ” atau “ lg ” titik putus. Untuk pengesahan, tukar saiz skrin halaman web dan pastikan perubahan. Artikel ini telah menunjukkan contoh untuk menggunakan titik putus yang diingini dan pertanyaan media pada utiliti 'justify-content' dalam Tailwind.