Teren de joacă Flexbox

Toate instrumentele

Experimentează cu proprietățile CSS Flexbox pe elemente live și copiază CSS-ul aspectului generat.

Previzualizare Apasă pe un element pentru a-l edita
CSS generat
—

Totul rulează în browserul tău — nimic nu este încărcat.

Container
12px
Elemente
0
Element selectat

Despre Teren de joacă Flexbox

Flexbox Playground este un sandbox practic pentru CSS flexbox. Setează proprietățile containerului — flex-direction, flex-wrap, justify-content, align-items, align-content și gap — și urmărește până la 12 elemente live reorganizându-se în previzualizare pe măsură ce schimbi fiecare valoare. E cel mai rapid mod de a înțelege ce face fiecare proprietate.

Elementele sunt editabile individual: dă click pe unul pentru a-l selecta și ajustează-i flex-grow, flex-shrink, flex-basis, align-self și order. Să vezi un element crescând pentru a ocupa spațiul liber în timp ce vecinii săi își păstrează lățimea te învață modelul de dimensionare flex mai repede decât orice diagramă.

Playground-ul generează CSS curat pentru container și pentru orice element cu setări diferite de cele implicite — copiază-l direct în foaia ta de stiluri. Totul rulează în browserul tău, fără nimic încărcat, iar un buton de resetare te readuce la o pagină curată.

Cum să utilizați Teren de joacă Flexbox

  1. Setează flex-direction, wrap, justify-content, align-items, align-content și gap ale containerului.
  2. Adaugă sau elimină elemente — între 2 și 12 — pentru a reproduce componenta ta reală.
  3. Dă click pe un element și ajustează-i grow, shrink, basis, align-self și order.
  4. Urmărește previzualizarea live actualizându-se la fiecare modificare.
  5. Copiază CSS-ul generat și lipește-l în proiectul tău.

Întrebări frecvente

flex-grow distribuie spațiul rămas: un element cu grow 2 primește de două ori mai mult spațiu suplimentar decât unul cu grow 1. flex-shrink funcționează invers atunci când spațiul e insuficient. Ambele sunt rapoarte între elementele vecine, nu dimensiuni absolute.

align-items poziționează elementele de-a lungul axei transversale în cadrul liniei lor. align-content spațiază mai multe linii care s-au format prin wrap în interiorul containerului — are efect vizibil doar când flex-wrap produce mai mult de o linie.

Fiecare element flex are implicit order 0; elementele sunt afișate de la cea mai mică valoare order la cea mai mare. Schimbarea order-ului unui element îl mută vizual fără a atinge HTML-ul — secvența din DOM, deci și ordinea pentru cititoarele de ecran, rămâne aceeași.

Da. CSS-ul generat acoperă regulile containerului plus un selector pentru fiecare element al cărui grow, shrink, basis, align-self sau order diferă de valoarea implicită, astfel încât să poți lipi un layout complet și funcțional.

Da — gratuit, fără înregistrare și complet local. Experimentele tale nu părăsesc niciodată tab-ul browserului.
Distribuiți
Instrumente conexe
Constructor de semnătură e-mail Proiectează o semnătură HTML profesională de e-mail din 30 de șabloane, personalizez și salveaz-o. Gratuit
Icoană în PNG Convertește Bootstrap Icons, Font Awesome și altele în imagini PNG personalizate — gratuit, în browserul tău. Gratuit
Generator de icoane pentru aplicații Generează un set complet de icoane pentru App Store și Google Play — fundaluri premium cu gradient, mesh și model, construit din logo-ul tău. Gratuit
Generator de favicon Construiește un pachet complet de favicon-uri dintr-un logo, o icoană de tip font sau un monogram — favicon.ico, PNG-uri moderne, icoana Apple touch, icoane PWA, un manifest web și fragmentul HTML. Gratuit
Generator CSS Box Shadow Creează umbre CSS stratificate cu glisoare live pentru offset, estompare, extindere, culoare, opacitate și inset — previzualizează pe un element real și copiază CSS-ul gata de lipit instant. Gratuit
Generator CSS Border Radius Creează vizual border-radius CSS cu previzualizare în timp real și copiază cod gata de producție. Gratuit
Căutări populare
teren de joacă flexbox generator css flexbox generator container flex instrument justify-content align-items generator aspect flex css vizualizator flexbox generator cod flexbox
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.