Flexbox og Grid leikvöllur

Hvernig á að nota flexbox og grid leikvöllinn

1. Veldu Uppsetning: Flexbox eða Grid, eða byrjaðu á einni af Forstillingar (Miðjað, Valmyndarstika, Spjöld sem brjótast, Hliðarstika, Aðlögunarhæft spjaldanet, Heilagur kaleikur, 12 dálkar).
2. Stilltu eiginleika Ílát. Fyrir flexbox: flex-direction og flex-wrap. Fyrir grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items og grid-template-areas. Báðar gerðir deila justify-content, align-items, align-content, row-gap (px) og column-gap (px).
3. Stjórnaðu Þættir með Bæta við þætti, Fjarlægja valinn þátt og Endurstilla valinn þátt. Smelltu á þátt í forskoðuninni (eða farðu á hann með Tab og ýttu á Enter) til að velja hann.
4. Breyttu valda þættinum: order og align-self í báðum stillingum, flex-grow, flex-shrink og flex-basis fyrir flexbox, og grid-area, grid-column, grid-row og justify-self fyrir grid.
5. Afritaðu CSS-kóði og samsvarandi HTML-kóði með Afrita hnöppunum.

Hver stjórnhlutur er venjulegur formreitur, svo allur leikvöllurinn virkar með lyklaborðinu einu saman. CSS-ið inniheldur aðeins eiginleikana sem þú breyttir frá sjálfgefnum gildum, sem heldur því stuttu, og þættir með eins stillingar deila einni reglu (.item þegar allir passa saman).

Flexbox í stuttu máli

Flexbox raðar þáttum eftir einum ási. flex-direction ákvarðar aðalásinn (röð eða dálk); justify-content dreifir þáttum eftir honum (center, space-between …) og align-items staðsetur þá á þverásnum. Með flex-wrap: wrap færast þættir sem passa ekki í nýja línu, og align-content setur þá bil á milli þessara lína.

Hver þáttur hefur þrjá stærðareiginleika, yfirleitt skrifaða saman sem flex:

• flex-basis: upphafsstærðin (auto notar innihaldið eða width);
• flex-grow: hversu mikið af lausa plássinu þátturinn tekur (0 = ekkert, 1 = jafn hlutur);
• flex-shrink: hversu mikið hann gefur eftir þegar pláss vantar (0 = minnkar aldrei).

Forstillingin Hliðarstika sýnir klassíska mynstrið: hliðarstika með flex-basis: 200px og flex-shrink: 0, og aðalsvæði með flex-grow: 1.

CSS Grid í stuttu máli

Grid raðar þáttum í tveimur víddum. grid-template-columns: repeat(3, 1fr) býr til þrjá jafna dálka; fr er hlutur af lausa plássinu. repeat(auto-fill, minmax(120px, 1fr)) býr til eins marga dálka og passa, hvern að minnsta kosti 120px, sem gefur aðlögunarhæft spjaldanet án nokkurrar media query.

Þættir fylla reitina í röð nema þú staðsetjir þá: grid-column: span 2 gerir þátt tveggja dálka breiðan og grid-column: 1 / -1 teygir hann yfir alla röðina.

grid-template-areas lætur þig teikna uppsetninguna með nöfnum. Sláðu inn eina röð í hverri línu, til dæmis header header og síðan nav main, og gefðu þáttum grid-area: header eða grid-area: main. Punktur merkir tóman reit. Hver röð þarf jafn marga reiti og hvert nafn verður að mynda ferhyrning; tólið varar þig við annars.