⭐ 0
🔍
Text Imagine PDF și Documente Audio Muzică Electronică Timp Utilitare Validatoare Ezoterism Jocuri

justify-content: spațiu între explicat (CSS)

Creați vizual un aspect CSS flexbox: flex-direction, justificare-conținut, aliniere-articole, flex-wrap și decalaj pe container, plus flex-grow per copil, flex-shrink și flex-basis, toate cu o previzualizare live și CSS copiabil.

Procesare... 0%

Rezultat

Această pagină deschide generatorul cu conținut justificat setat la spațiu între: prima cutie se află la același nivel cu marginea de pornire a containerului, ultima cutie se așează la același nivel cu marginea sa de capăt, iar spațiul rămas este împărțit în spații egale între cutiile din mijloc - niciodată înainte de prima sau după ultima.

Acesta este detaliul pe care oamenii îl amestecă. Spațiul în jurul oferă fiecărei casete o marjă egală pe ambele laturi, astfel încât golurile dintre cutii ajung să fie de două ori mai largi decât golurile de la cele două margini exterioare (fiecare margine primește doar o marjă a casetei, nu două). spațiu-uniform merge mai departe și face ca fiecare spațiu să aibă aceeași dimensiune, inclusiv cele două margini exterioare - singura dintre cele trei în care distanța pare perfect uniformă pe tot drumul.

Comutați meniul derulant justificare-conținut între cele trei valori de mai jos și urmăriți rearanjarea acelorași trei casete - este cel mai rapid mod de a vedea diferența în loc să o memorați. Copiați CSS-ul pentru oricare dintre ele se potrivește cu spațierea dorită de fapt.

🛡️
Rulat în browser

Fișierele și datele introduse nu părăsesc niciodată acest dispozitiv. Procesarea rulează complet offline. 100% sigur.

Formate și reguli acceptate

  • Controale pentru container: direcție flexibilă, conținut justificat, aliniere a elementelor, înfășurare flexibilă și o introducere a decalajului în pixeli, aplicată în direct previzualizării.
  • În mod implicit, trei casete copil codificate cu culori (adăugați până la opt, eliminați până la două), fiecare cu propriile câmpuri flex-grow, flex-shrink și flex-basis.
  • Bloc CSS copiabil cu o regulă .flex-container plus o regulă .flex-item-N per copil care are proprietăți flexibile care nu sunt implicite.

Beneficii cheie

✓ Fiecare control container și flex-grow, flex-shrink și flex-base ale fiecărui copil actualizează trei casete de previzualizare numerotate, astfel încât să vedeți exact ce fac regulile dumneavoastră flexbox înainte de a atinge o foaie de stil.
✓ Generatorul tipărește doar reguli copil care diferă de fapt de valorile implicite CSS, astfel încât codul copiat rămâne scurt și lizibil în loc să reintroducă flex-grow: 0 pe fiecare casetă.
✓ Paginile prestabilite rezolvă aspectele pe care oamenii le caută după nume: centrarea unui div, un logo-legături din stânga-bara de navigare din dreapta și coloane flexibile cu lățime egală - deschideți unul și instrumentul este deja configurat.

Cazuri de utilizare

  • • Obțineți CSS exact pentru a centra un div atât pe orizontală, cât și pe verticală, urmărind conținutul justificat și elementele de aliniere lucrând în casetele de previzualizare live.
  • • Creați un aspect al barei de navigare cu logo-stânga, linkuri-dreapta cu spațiu între și elemente de aliniere: centrați, apoi copiați containerul CSS direct în componenta antet.
  • • Comparați spațiul dintre, spațiul în jur și spațiul uniform unul lângă altul pe aceleași trei casete, în loc să ghiciți care dintre ele se potrivește cu distanța dorită.