⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

justify-content: space-between Explained (CSS)

Bina reka letak flexbox CSS secara visual: flex-direction, justify-content, align-item, flex-wrap dan gap pada bekas, ditambah dengan flex-grow setiap kanak-kanak, flex-shrink dan flex-basis, semuanya dengan pratonton langsung dan CSS yang boleh disalin.

Memproses... 0%

Hasilnya

Halaman ini membuka penjana dengan set justify-content ke ruang-antara: kotak pertama terletak rata pada tepi permulaan kontena, kotak terakhir duduk rata pada tepi hujungnya dan ruang sisa dibahagikan kepada jurang yang sama antara kotak di tengah — tidak pernah sebelum yang pertama atau selepas yang terakhir.

Itulah detail yang orang campur aduk. ruang sekeliling memberikan setiap kotak jidar yang sama pada kedua-dua belahnya, jadi jurang antara kotak berakhir dua kali lebih lebar daripada jurang di dua tepi luar (setiap tepi hanya mendapat satu jidar kotak, bukan dua). ruang-sekata pergi lebih jauh dan menjadikan setiap jurang mempunyai saiz yang sama, termasuk dua tepi luar — satu-satunya daripada tiga yang jaraknya kelihatan seragam sempurna sepanjang jalan.

Tukar menu lungsur justify-content antara tiga nilai di bawah dan tonton tiga kotak yang sama disusun semula — ini adalah cara terpantas untuk melihat perbezaan dan bukannya menghafalnya. Salin CSS untuk mana-mana yang sepadan dengan jarak yang anda mahukan.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Kawalan bekas: flex-direction, justify-content, align-item, flex-wrap dan input jurang dalam piksel, digunakan secara langsung pada pratonton.
  • Tiga kotak kanak-kanak berkod warna secara lalai (tambah sehingga lapan, keluarkan ke bawah kepada dua), setiap satu dengan medan flex-grow, flex-shrink dan flex-asas sendiri.
  • Blok CSS boleh disalin dengan peraturan .flex-container ditambah satu peraturan .flex-item-N bagi setiap kanak-kanak yang mempunyai sifat flex bukan lalai.

Faedah Utama

✓ Setiap kawalan bekas dan pertumbuhan fleksibel, pengecutan fleksibel dan asas fleksibel setiap kanak-kanak mengemas kini tiga kotak pratonton bernombor secara langsung, jadi anda melihat dengan tepat apa yang dilakukan oleh peraturan kotak fleksibel anda sebelum menyentuh helaian gaya.
✓ Penjana hanya mencetak peraturan kanak-kanak yang sebenarnya berbeza daripada lalai CSS, jadi kod yang disalin kekal pendek dan boleh dibaca dan bukannya menyatakan semula flex-grow: 0 pada setiap kotak.
✓ Halaman pratetap menyelesaikan reka letak yang dicari oleh orang mengikut nama: memusatkan div, bar navigasi kanan pautan kiri logo dan lajur fleksibel yang sama lebar — buka satu dan alat sudah dikonfigurasikan.

Kes Penggunaan

  • • Dapatkan CSS yang tepat untuk memusatkan div secara mendatar dan menegak dengan menonton justify-content dan align-item berfungsi pada kotak pratonton langsung.
  • • Bina reka letak navbar logo-kiri, pautan-kanan dengan ruang-antara dan jajar-item: tengah, kemudian salin CSS bekas terus ke dalam komponen pengepala anda.
  • • Bandingkan ruang-antara, ruang-keliling dan ruang-sekata bersebelahan pada tiga kotak yang sama dan bukannya meneka yang mana satu sepadan dengan jarak yang anda inginkan.