Spațiu de joacă flex Bootstrap

Toate instrumentele

Creează vizual layout-uri flex Bootstrap 5.3 și copiază exact clasele utilitare: d-flex, justify-content, align-items, order, grow și altele.

Previzualizare Dă clic pe un element pentru a-l edita
HTML generat
—

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

Clasele pe care le setezi se aplică începând de la acest breakpoint în sus. Schimbă breakpoint-urile pentru a crea layout-uri responsive.

Container
Elemente
0
Element selectat

Despre Spațiu de joacă flex Bootstrap

Bootstrap Flex Playground îți permite să construiești layout-uri flexbox cu clase utilitare reale Bootstrap 5.3 în loc de CSS brut. Configurează containerul — direcție, wrapping, justify-content, align-items, gap — cu controale segmentate, dă clic pe orice element pentru a-i seta propriile utilitare align-self, order, grow și shrink și urmărește previzualizarea live rearanjându-se instantaneu.

Comutatorul de puncte de întrerupere (breakpoint) este ce transformă acest instrument din simplă jucărie: alege sm, md, lg, xl sau xxl, iar clasele pe care le setezi din acel punct primesc infixul responsiv — justify-content-md-between, flex-lg-row — exact așa cum sistemul mobile-first al Bootstrap le aplică de la acel punct de întrerupere în sus. Adaugă până la 12 elemente pentru a simula o componentă realistă.

Când layout-ul arată bine, copiază HTML-ul generat sau doar clasele containerului și lipește-le direct în proiectul tău. Totul rulează în browserul tău și nimic nu este încărcat.

Cum să utilizați Spațiu de joacă flex Bootstrap

  1. Setează utilitarele containerului — direcție, wrap, justify-content, align-items și gap — cu controalele segmentate.
  2. Adaugă sau elimină elemente (2 până la 12) pentru a se potrivi componentei tale reale.
  3. Dă clic pe un element pentru a-i da propriile utilitare align-self, order sau de dimensionare flex.
  4. Comută punctele de întrerupere pentru a adăuga variante responsive care se aplică de la sm, md, lg, xl sau xxl în sus.
  5. Verifică previzualizarea live, apoi copiază HTML-ul generat sau clasele containerului.

Întrebări frecvente

Bootstrap este mobile-first: o clasă setată la un punct de întrerupere se aplică de la acea lățime în sus. Setarea justify-content-between cât timp md este selectat produce justify-content-md-between, care se activează la 768 px și rămâne activă pe ecrane mai mari.

Acest instrument produce clase utilitare Bootstrap 5.3 (d-flex, justify-content-center, order-2) gata pentru un proiect Bootstrap. Flexbox Playground generează în schimb proprietăți CSS simple — alege-l pe cel potrivit pentru stack-ul tău.

Da. Dă clic pe orice element din previzualizare pentru a-l selecta, apoi setează utilitare per-element precum align-self, order, grow și shrink. HTML-ul generat arată fiecare element cu exact clasele pe care le-ai atribuit.

Între 2 și 12. Acest interval acoperă totul, de la un simplu antet cu două coloane până la o bară de utilități completă, și menține previzualizarea lizibilă în timp ce experimentezi.

Da, este gratuit și rulează în întregime în browserul tău — fără înregistrare, iar nimic din ce construiești nu este încărcat nicăieri.
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
spațiu de joacă flex bootstrap generator flexbox bootstrap utilitare flex bootstrap 5 generator de clase d-flex justify-content align-items bootstrap constructor de clase flex bootstrap instrument flexbox responsive bootstrap
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.