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

Coloane Flexbox cu lățime egală — Generator 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 flex-grow: 1 deja setat în toate cele trei casete de previzualizare. Urmărește-le: în loc să se micșoreze pentru a se potrivi cu conținutul lor, fiecare cutie revendică o cotă identică din spațiul rămas din rând, care este întreaga rețetă pentru coloane flexibile de lățime egală - fără lățimi procentuale, fără calc(), fără matematică de pixeli fixă ​​pentru a menține sincronizate.

flex-grow: 1 îi spune unui copil să crească, iar stabilirea lui pe fiecare copil din rând înseamnă că toți cresc cu aceeași cantitate, astfel încât ajung la aceeași lățime, indiferent de câte sunt sau ce conținut se află în interiorul lor. Adăugați sau eliminați o casetă cu comenzile de mai jos, iar coloanele rămase se redistribuie instantaneu pentru a rămâne egale - redimensionați o fereastră de browser peste acest aspect în producție și se comportă în același mod.

Acesta este modelul din spatele grilelor de carduri de înălțime egală, coloanelor din tabelul de prețuri și secțiunilor de subsol împărțite uniform. Oferiți mai mult spațiu unei coloane ridicându-și flex-grow deasupra celorlalte sau copiați blocul CSS de mai jos exact așa cum a fost generat pentru o împărțire egală curată.

🛡️
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ă.