Playground tal-Flexbox u tal-Grid

Kif tuża l-playground tal-flexbox u tal-grid

1. Agħżel Tqassim: Flexbox jew Grid, jew ibda minn wieħed mill-Preset (Iċċentrat, Bar tan-navigazzjoni, Kards li jgħaddu fuq linja ġdida, Sidebar, Grid ta’ kards responsiv, Holy grail, 12-il kolonna).
2. Issettja l-proprjetajiet tal-Kontenitur. Għal flexbox: flex-direction u flex-wrap. Għal grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items u grid-template-areas. It-tnejn jaqsmu justify-content, align-items, align-content, row-gap (px) u column-gap (px).
3. Immaniġġja l-Elementi b’Żid element, Neħħi l-element magħżul u Irrisettja l-element magħżul. Ikklikkja element fil-previżjoni (jew ċaqlaq miegħu bit-Tab u agħfas Enter) biex tagħżlu.
4. Editja l-element magħżul: order u align-self fiż-żewġ modi, flex-grow, flex-shrink u flex-basis għal flexbox, u grid-area, grid-column, grid-row u justify-self għal grid.
5. Ikkopja l-Kodiċi CSS u l-Kodiċi HTML korrispondenti bil-buttuni Ikkopja tagħhom.

Kull kontroll huwa qasam standard ta’ formola, allura l-playground kollu jaħdem bil-keyboard waħdu. Is-CSS fih biss il-proprjetajiet li biddilt mill-valuri awtomatiċi, u dan iżommu qasir, u elementi b’settings identiċi jaqsmu regola waħda (.item meta jaqblu kollha).

Kollox jaħdem fil-brawżer tiegħek; xejn minn dak li tikteb ma jintbagħat lil server.

Flexbox fil-qosor

Flexbox jqassam l-elementi tul assi wieħed. flex-direction jissettja l-assi prinċipali (ringiela jew kolonna); justify-content jqassam l-elementi tulu (center, space-between…), u align-items jpoġġihom fuq l-assi trasversali. B’flex-wrap: wrap, l-elementi li ma jaqblux imorru fuq linja ġdida, u align-content imbagħad jaqsam l-ispazju bejn dawk il-linji.

Kull element għandu tliet proprjetajiet tad-daqs, ġeneralment miktubin flimkien bħala flex:

• flex-basis: id-daqs tal-bidu (auto juża l-kontenut jew width);
• flex-grow: kemm jieħu mill-ispazju ħieles l-element (0 = xejn, 1 = sehem indaqs);
• flex-shrink: kemm jċedi meta l-ispazju jkun skars (0 = qatt ma jiċkien).

Il-preset Sidebar juri l-mudell klassiku: sidebar b’flex-basis: 200px u flex-shrink: 0, u żona prinċipali b’flex-grow: 1.

CSS Grid fil-qosor

Grid iqassam l-elementi f’żewġ dimensjonijiet. grid-template-columns: repeat(3, 1fr) joħloq tliet kolonni indaqs; fr huwa sehem mill-ispazju ħieles. repeat(auto-fill, minmax(120px, 1fr)) joħloq kemm jidħlu kolonni ta’ mill-inqas 120px, u dan jagħmel grid ta’ kards responsiv mingħajr ebda media query.

L-elementi jimlew iċ-ċelloli bl-ordni, sakemm ma tpoġġihomx int: grid-column: span 2 jagħmel element wiesa’ żewġ kolonni, u grid-column: 1 / -1 jifrixhu mar-ringiela kollha.

grid-template-areas iħallik tfassal it-tqassim bl-ismijiet. Ikteb ringiela waħda għal kull linja, per eżempju header header imbagħad nav main, u agħti lill-elementi grid-area: header jew grid-area: main. Punt jimmarka ċellola vojta. Kull ringiela teħtieġ l-istess numru ta’ ċelloli u kull isem irid jifforma rettangolu; inkella l-għodda twissik.