Generator de flexbox CSS
Construiți un container flexibil și articolele acestuia vizual, apoi copiați CSS, clase Tailwind sau stil incorporat.
Generator de flexbox CSS
Configurați flex-direction, flex-wrap, justify-content, align-items și align-content cu meniuri derulante, adăugați un spațiu în orice unitate și acest instrument scrie regula containerului flexibil pentru dvs. — împreună cu o regulă corespunzătoare pentru articolele acesteia și o mică previzualizare de text arătând cum se aliniază casetele. Folosiți-l pentru a schița o bară de navigație, o rând de carduri, o bară de instrumente de formular sau orice layout care necesită articole distribuite, centrate sau înfășurate fără a recurge la o grilă completă.
Controlurile de articol aplică flex-grow, flex-shrink și flex-basis uniform pe toate articolele pe care le alegeți, ceea ce este exact cum funcționează majoritatea rândurilor flexibile reale: o clasă de articol care guvernează mai multe casete decât valori individuale per casetă. Align-content apare în ieșire doar atunci când flex-wrap este setat la wrap sau wrap-reverse, deoarece browserele o ignora în caz contrar — instrumentul nu imprimă niciodată o declarație care nu face nimic.
Alegeți formatul de ieșire care se potrivește cu modul în care construiți: CSS simplu pentru o foaie de stil, clase de utilitate Tailwind (parantezele cu valoare arbitrară acoperă spații și baze care nu se încadrează în scala de spațiere implicită) sau un atribut de stil incorporat pentru un prototip rapid sau marcare sigură pentru e-mail. Fiecare valoare se actualizează în momentul în care modificați o opțiune și previzualizarea layout-ului se redesenează cu aceasta — fără etapă de construire, fără CSS extern de încărcat.
Tot ceea ce se execută local în browserul dvs.; nimic din ceea ce configurați aici nu este trimis nicăieri. Când CSS-ul arată corect, copiați-l, descărcați-l ca fișier .txt sau trimiteți-l înapoi în intrare pentru a continua iterația cu un alt instrument.