Generator flexbox și CSS Grid

Cum folosești generatorul de flexbox și grid

1. Alege o Aranjare: Flexbox sau Grid, ori pornește de la una dintre Presetări (Centrat, Bară de navigare, Carduri care se împart pe rânduri, Bară laterală, Grilă de carduri adaptabilă, Holy grail, 12 coloane).
2. Setează proprietățile Container. Pentru flexbox: flex-direction și flex-wrap. Pentru grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items și grid-template-areas. Ambele au în comun justify-content, align-items, align-content, row-gap (px) și column-gap (px).
3. Gestionează Elemente cu Adaugă element, Elimină elementul selectat și Resetează elementul selectat. Apasă pe un element din previzualizare (sau ajunge la el cu Tab și apasă Enter) ca să îl selectezi.
4. Editează elementul selectat: order și align-self în ambele moduri, flex-grow, flex-shrink și flex-basis pentru flexbox, respectiv grid-area, grid-column, grid-row și justify-self pentru grid.
5. Copiază Cod CSS și Cod HTML corespunzător, cu butoanele lor Copiază.

Fiecare control este un câmp de formular standard, deci tot generatorul funcționează doar cu tastatura. CSS-ul conține doar proprietățile pe care le-ai schimbat față de valorile implicite, ceea ce îl ține scurt, iar elementele cu setări identice folosesc o singură regulă (.item când toate se potrivesc).

Flexbox pe scurt

Flexbox aranjează elementele de-a lungul unei singure axe. flex-direction stabilește axa principală (un rând sau o coloană); justify-content distribuie elementele de-a lungul ei (center, space-between…), iar align-items le poziționează pe axa transversală. Cu flex-wrap: wrap, elementele care nu încap trec pe o linie nouă, iar align-content spațiază apoi acele linii.

Fiecare element are trei proprietăți de dimensionare, scrise de obicei împreună ca flex:

• flex-basis: dimensiunea de pornire (auto folosește conținutul sau width);
• flex-grow: cât din spațiul liber ia elementul (0 = nimic, 1 = o parte egală);
• flex-shrink: cât cedează când spațiul este insuficient (0 = nu se micșorează niciodată).

Presetarea Bară laterală arată modelul clasic: o bară laterală cu flex-basis: 200px și flex-shrink: 0 și o zonă principală cu flex-grow: 1.

CSS Grid pe scurt

Grid aranjează elementele în două dimensiuni. grid-template-columns: repeat(3, 1fr) creează trei coloane egale; fr este o parte din spațiul liber. repeat(auto-fill, minmax(120px, 1fr)) creează câte coloane de cel puțin 120px încap, ceea ce dă o grilă de carduri adaptabilă, fără nicio interogare media.

Elementele umplu celulele în ordine, dacă nu le plasezi tu: grid-column: span 2 face un element lat cât două coloane, iar grid-column: 1 / -1 îl întinde pe tot rândul.

grid-template-areas îți permite să desenezi aranjarea cu nume. Scrie câte un rând pe linie, de exemplu header header apoi nav main, și dă elementelor grid-area: header sau grid-area: main. Un punct marchează o celulă goală. Fiecare rând trebuie să aibă același număr de celule, iar fiecare nume trebuie să formeze un dreptunghi; altfel, instrumentul te avertizează.