Clós Súgartha Flexbox agus Grid

Conas an clós súgartha flexbox agus grid a úsáid

1. Roghnaigh Leagan amach: Flexbox nó Grid, nó tosaigh ó cheann de na Réamhshocruithe (Lárnaithe, Barra nascleanúna, Cártaí ag fillteadh, Barra taoibh, Eangach cártaí imoibríoch, Holy grail, 12 cholún).
2. Socraigh airíonna an Coimeádán. Do flexbox: flex-direction agus flex-wrap. Do grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items agus grid-template-areas. Roinneann an dá cheann justify-content, align-items, align-content, row-gap (px) agus column-gap (px).
3. Bainistigh na Míreanna le Cuir mír leis, Bain an mhír roghnaithe agus Athshocraigh an mhír roghnaithe. Cliceáil mír sa réamhamharc (nó téigh chuici le Tab agus brúigh Enter) chun í a roghnú.
4. Cuir an mhír roghnaithe in eagar: order agus align-self sa dá mhód, flex-grow, flex-shrink agus flex-basis do flexbox, agus grid-area, grid-column, grid-row agus justify-self do grid.
5. Cóipeáil an Cód CSS agus an Cód HTML comhfhreagrach lena gcnaipí Cóipeáil.

Is gnáthréimse foirme gach rialú, mar sin oibríonn an clós súgartha ar fad leis an méarchlár amháin. Ní chuimsíonn an CSS ach na hairíonna a d’athraigh tú óna réamhshocruithe, rud a choimeádann gearr é, agus roinneann míreanna a bhfuil socruithe comhionanna acu riail amháin (.item nuair a mheaitseálann siad go léir).

Ritheann an uirlis seo i do bhrabhsálaí. Ní chuirtear aon rud chuig freastalaí.

Flexbox i mbeagán focal

Leagann flexbox míreanna amach feadh aise amháin. Socraíonn flex-direction an phríomhaiseach (sraith nó colún); dáileann justify-content míreanna feadh na haise sin (center, space-between…), agus cuireann align-items iad ar an aiseach thrasna. Le flex-wrap: wrap, bogann míreanna nach n-oireann go líne nua, agus spásálann align-content na línte sin ansin.

Tá trí airí méide ag gach mír, a scríobhtar le chéile de ghnáth mar flex:

• flex-basis: an méid tosaigh (úsáideann auto an t-ábhar nó width);
• flex-grow: cé mhéad den spás saor a ghlacann an mhír (0 = aon cheann, 1 = sciar comhionann);
• flex-shrink: cé mhéad a thugann sí suas nuair a bhíonn spás gann (0 = ní laghdaíonn sí riamh).

Taispeánann an réamhshocrú Barra taoibh an patrún clasaiceach: barra taoibh le flex-basis: 200px agus flex-shrink: 0, agus príomhlimistéar le flex-grow: 1.

CSS Grid i mbeagán focal

Leagann grid míreanna amach i ndá thoise. Cruthaíonn grid-template-columns: repeat(3, 1fr) trí cholún chomhionanna; is sciar den spás saor é fr. Cruthaíonn repeat(auto-fill, minmax(120px, 1fr)) an oiread colún de 120px ar a laghad agus is féidir a fheistiú, rud a dhéanann eangach cártaí imoibríoch gan aon cheist meán (media query).

Líonann míreanna na cealla in ord, mura gcuireann tú iad: déanann grid-column: span 2 mír dhá cholún ar leithead, agus sineann grid-column: 1 / -1 í ar fud na sraithe ar fad.

Ligeann grid-template-areas duit an leagan amach a tharraingt le hainmneacha. Clóscríobh sraith amháin in aghaidh na líne, mar shampla header header ansin nav main, agus tabhair grid-area: header nó grid-area: main do mhíreanna. Marcálann lánstad cill fholamh. Teastaíonn an líon céanna cealla ó gach sraith agus caithfidh gach ainm dronuilleog a dhéanamh; tugann an uirlis rabhadh duit murab ionann.