⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

justify-content: spasi-antara Dijelaskan (CSS)

Buat tata letak flexbox CSS secara visual: flex-direction, justify-content, align-items, flex-wrap dan gap pada container, ditambah flex-grow per-child, flex-shrink dan flex-basis, semuanya dengan pratinjau langsung dan CSS yang dapat disalin.

Memproses... 0%

Hasil

Halaman ini membuka generator dengan justify-content diatur ke spasi-antara: kotak pertama diletakkan sejajar dengan tepi awal wadah, kotak terakhir sejajar dengan tepi ujungnya, dan ruang tersisa dibagi menjadi celah yang sama antara kotak-kotak di tengah — tidak pernah sebelum kotak pertama atau setelah kotak terakhir.

Itulah detail yang dibingungkan orang. space-around memberi setiap kotak margin yang sama di kedua sisinya, sehingga jarak antar kotak menjadi dua kali lebih lebar dari jarak di dua tepi luar (setiap tepi hanya mendapat margin satu kotak, bukan dua). space-evenly melangkah lebih jauh dan membuat setiap celah memiliki ukuran yang sama, termasuk dua tepi luarnya — satu-satunya dari tiga celah yang jaraknya terlihat seragam sempurna di seluruh bagiannya.

Ganti dropdown justify-content antara tiga nilai di bawah dan lihat tiga kotak yang sama disusun ulang — ini adalah cara tercepat untuk melihat perbedaannya daripada menghafalnya. Salin CSS mana pun yang cocok dengan spasi yang Anda inginkan.

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Kontrol kontainer: flex-direction, justify-content, align-items, flex-wrap dan input gap dalam piksel, diterapkan langsung ke pratinjau.
  • Tiga kotak anak berkode warna secara default (tambahkan hingga delapan, hapus hingga dua), masing-masing dengan bidang pertumbuhan fleksibel, penyusutan fleksibel, dan basis fleksibel.
  • Blok CSS yang dapat disalin dengan aturan .flex-container ditambah satu aturan .flex-item-N per turunan yang memiliki properti fleksibel non-default.

Manfaat Utama

✓ Setiap kontrol kontainer dan pembaruan flex-grow, flex-shrink, dan flex-basis setiap anak, tiga kotak pratinjau bernomor aktif, sehingga Anda melihat dengan tepat apa yang dilakukan aturan flexbox Anda sebelum menyentuh stylesheet.
✓ Generator hanya mencetak aturan anak yang sebenarnya berbeda dari default CSS, sehingga kode yang disalin tetap pendek dan mudah dibaca alih-alih menyatakan ulang flex-grow: 0 di setiap kotak.
✓ Halaman preset menyelesaikan tata letak yang dicari orang berdasarkan nama: div tengah, bilah navigasi kiri-link-kanan logo, dan kolom fleksibel dengan lebar yang sama — buka satu dan alat sudah dikonfigurasi.

Kasus Penggunaan

  • • Dapatkan CSS yang tepat untuk memusatkan div secara horizontal dan vertikal dengan melihat konten justifikasi dan item penyelarasan berfungsi di kotak pratinjau langsung.
  • • Buat tata letak navbar kiri-logo, tautan-kanan dengan spasi-antara dan align-items: center, lalu salin CSS container langsung ke komponen header Anda.
  • • Bandingkan jarak antara, jarak sekitar, dan jarak rata secara berdampingan pada tiga kotak yang sama alih-alih menebak mana yang cocok dengan jarak yang Anda inginkan.