Bagaimana Cara Menerapkan Breakpoints dan Media Queries dengan 'justify-content' di Tailwind?

” elemen untuk mengubah perataan horizontal itemnya pada ukuran layar sedang dan besar:

< tubuh >

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

< / div >

< / tubuh >

Di Sini:

• 'membenarkan-mulai' kelas menyelaraskan item fleksibel di awal sumbu utama wadah.
• 'md: justify-between' kelas mendistribusikan item fleksibel di sepanjang sumbu utama penampung dengan jarak yang sama di antara mereka pada ukuran layar sedang.
• 'lg: justify-end' kelas menyelaraskan item fleksibel di ujung sumbu utama wadah pada ukuran layar besar.

Keluaran

---

---

Output di atas menunjukkan bahwa perataan horizontal item fleksibel berubah karena ukuran layar bervariasi. Ini menunjukkan bahwa titik henti sementara dan kueri media yang ditentukan telah diterapkan secara efektif dengan utilitas 'konten justifikasi'.

Kesimpulan

Untuk menerapkan breakpoint dan kueri media dengan utilitas “justify-content” di Tailwind, tentukan nilai yang diinginkan ke “membenarkan-” utilitas untuk berbagai ukuran layar dengan memanfaatkan ' md ' atau ' lg ” breakpoint. Untuk verifikasi, ubah ukuran layar halaman web dan pastikan perubahan. Artikel ini telah mendemonstrasikan contoh untuk menerapkan breakpoint dan kueri media yang diinginkan pada utilitas “justify-content” di Tailwind.