Introducere în CSS Flexbox
CSS Flexbox este un model de dispunere unidimensional conceput pentru a distribui spațiul între elemente și pentru a le alinia eficient în cadrul unui container. Acest sistem oferă control asupra modului în care elementele se extind, se comprimă și se poziționează, adaptându-se la dimensiunea ecranului. Utilizarea Flexbox simplifică crearea de machete flexibile și structuri complexe fără a recurge la tehnici învechite de poziționare.
Macheta dumneavoastră este creată direct în browser. Nimic din ceea ce setați aici nu este încărcat pe BroBroGo.
Proprietățile containerului flexibil
Configurarea unei machete începe de la containerul părinte. Generatorul permite ajustarea vizuală a următoarelor proprietăți fundamentale ale containerului:
- Direcție: Definește axa principală de aliniere. Opțiunile includ Rând (Row), Rând invers, Coloană (Column) și Coloană inversă.
- Înfășurare (Wrap): Controlează dacă elementele sunt forțate pe o singură linie sau pot trece pe rânduri noi. Puteți selecta Fără înfășurare, Înfășurare sau Înfășurare inversă.
- Aliniere conținut pe axa principală (Justify): Distribuie spațiul liber de-a lungul axei principale. Valorile disponibile sunt Început, Sfârșit, Centru, Spațiu între, Spațiu de jur împrejur și Spațiu distribuit egal.
- Aliniere elemente (Align items): Definește comportamentul implicit de aliniere al elementelor pe axa secundară. Opțiunile sunt Început, Sfârșit, Centru, Întindere (Stretch) și Linie de bază (Baseline).
- Aliniere conținut (Align content): Aliniază rândurile containerului atunci când există spațiu suplimentar pe axa secundară. Această proprietate este activă doar când elementele se înfășoară pe mai multe linii. Setările includ Început, Sfârșit, Centru, Întindere (Stretch), Spațiu între, Spațiu de jur împrejur și Spațiu distribuit egal.
- Spațiere (Gap): Reprezintă o valoare numerică ce stabilește spațiul direct dintre elemente și dintre rânduri, eliminând necesitatea marginilor exterioare individuale.
Proprietățile elementelor individuale
Fiecare element din interiorul containerului poate fi configurat independent pentru a-și modifica comportamentul implicit. Atunci când faceți clic pe Adaugă element, un nou element apare în previzualizare (de exemplu, "Element 5"). Proprietățile specifice fiecărui element sunt:
- Ordine (Order): O valoare numerică ce reordonează vizual elementele în pagină, fără a altera ordinea lor în codul sursă HTML.
- Extindere (Grow): O valoare numerică ce determină cât de mult se va extinde elementul pentru a ocupa spațiul liber rămas în container.
- Comprimare (Shrink): O valoare numerică ce stabilește capacitatea elementului de a se micșora atunci când spațiul total este insuficient.
- Bază (Basis): Definește dimensiunea inițială a elementului înainte de distribuirea spațiului rămas. Poate fi o valoare numerică sau Bază automată.
- Aliniere proprie (Align self): Permite suprascrierea alinierii generale stabilite de container pentru un singur element. Opțiunile sunt Auto, Început, Sfârșit, Centru, Întindere (Stretch) și Linie de bază (Baseline).
Relația dintre axe și comportamentul de înfășurare
Înțelegerea modului în care axele interacționează este esențială pentru controlul precis al machetei. Axa principală este definită de proprietatea Direcție. Atunci când comutați direcția de la Rând (Row) la Coloană (Column), axa principală și axa secundară se inversează. Această inversare modifică direct modul în care funcționează proprietățile Aliniere conținut pe axa principal (Justify) și Aliniere elemente (Align items).
Comportamentul de înfășurare determină structura pe verticală sau orizontală a containerului. Cu opțiunea Fără înfășurare activată, toate elementele sunt forțate să rămână pe o singură linie, chiar dacă depășesc lățimea containerului. Când activați Înfășurare, elementele care nu mai au loc pe linia curentă trec automat pe rândul următor. În acest scenariu multi-linie, proprietatea Aliniere conținut (Align content) devine activă și gestionează spațierea acestor rânduri ca un grup unitar. Proprietatea Spațiere (Gap) definește distanța constantă dintre elemente pe rânduri și între rândurile nou create.
Generarea codului CSS și utilizarea presetărilor
Pe măsură ce manipulați controalele vizuale, instrumentul generează în timp real codul CSS corespunzător pentru container și elemente. O regulă importantă a generatorului este că doar elementele care au proprietățile modificate vor avea propriile reguli CSS generate în mod individual. Elementele neschimbate vor moșteni comportamentul implicit al containerului.
Pentru a facilita procesul de design, puteți utiliza secțiunea Presetări, care configurează instantaneu structuri comune:
- Centrat: Aliniază perfect un element în mijlocul containerului.
- Bară de navigare: Distribuie elementele pe orizontală cu spațiu între ele.
- Stivă (Stack): Aranjează elementele pe verticală, unul sub celălalt.
- Carduri: Creează o grilă flexibilă de elemente care se înfășoară pe rânduri noi.
- Bară laterală: Organizează ecranul într-o zonă principală de conținut și o coloană laterală adiacentă.
După finalizarea configurării, faceți clic pe butonul Copiază CSS. Starea butonului se va schimba în "Copiat", confirmând că proprietățile CSS au fost salvate în clipboard și sunt gata pentru a fi introduse în foaia dumneavoastră de stiluri.
Întrebări frecvente (FAQ)
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.