Generator Flexbox

Configurați un container flex și elementele sale cu ajutorul controalelor vizuale, urmăriți modificările în timp real și copiați codul CSS printr-un singur clic.

Presetări
Container
Direcție
Înfășurare (Wrap)
Aliniere conținut pe axa principală (Justify)
Aliniere elemente (Align items)
Elemente
Element 1
Aliniere proprie (Align self)
CSS
Ajustați containerul și elementele pentru a vă modela macheta.

Macheta dumneavoastră este creată direct în browser. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo.

Întrebări frecvente

Care este diferența dintre justify-content și align-items?

Proprietatea justify-content distribuie elementele de-a lungul axei principale — direcția în care curge rândul sau coloana — în timp ce align-items le poziționează pe axa secundară. Schimbați direcția de la rând (row) la coloană (column) și cele două axe se vor inversa, astfel încât justify-content va funcționa de sus în jos, iar align-items de la stânga la dreapta.

Cum funcționează setările individuale pentru fiecare element?

Selectați un element după numărul său, apoi stabiliți cât de mult se extinde pentru a umple spațiul liber (grow), cât de mult se micșorează când spațiul este limitat (shrink), dimensiunea sa de pornire (basis) și propria sa aliniere pe axa secundară. Proprietatea order mută un element mai devreme sau mai târziu pe ecran, fără a modifica structura HTML. Doar elementele pe care le modificați efectiv vor primi reguli dedicate în codul CSS rezultat.

Când devin importante proprietățile wrap și align-content?

Când opțiunea de înfășurare (wrap) este oprită, toate elementele sunt forțate pe o singură linie și pot fi comprimate. Când o activați, elementele care nu mai încap trec pe rândul următor — moment în care align-content preia controlul, gestionând spațierea rândurilor ca un grup. Proprietatea gap setează spațiul dintre elemente și dintre rânduri, fără a folosi margini.

Generator CSS Cubic BezierTrageți de cele două mânere pentru a modela o curbă de atenuare, urmăriți mișcarea unui punct comparativ cu una constantă și copiați valoarea cubic-bezier().Generator Border RadiusRotunjiți fiecare colț cu ajutorul glisoarelor, creați forme organice cu modul eliptic și copiați instantaneu codul CSS.Generator Box ShadowTrageți de glisoare pentru a crea o umbră de tip box-shadow, suprapuneți straturi pentru profunzime și copiați instantaneu codul CSS rezultat.Generator de gradiențiCreați un gradient liniar, radial sau conic, adăugați puncte de oprire a culorii, setați direcția și copiați codul CSS rezultat printr-un singur clic.Generator CSS GridDefiniți coloanele și rândurile, selectați celulele pentru a plasa elementele și copiați codul CSS împreună cu cel HTML corespunzător printr-un singur clic.Calculator CSS clamp()Introduceți dimensiunile pentru ecrane mici și mari și obțineți o valoare fluidă clamp() care se scalează armonios între ele — ideală pentru dimensiuni de font, padding, margini sau spațieri.Convertor de culoriConvertiți culori între HEX, RGB, HSL, HSV, CMYK și LAB — editați orice câmp și restul se vor actualiza pe parcurs.