Gineadóir Flexbox

Socraigh coimeádán flex agus a mhíreanna le rialtáin radhairc, féach ar an leagan amach ag freagairt beo, agus cóipeáil an CSS le cliceáil amháin.

Réamhsocruithe
Coimeádán
Treo
Timpeallú
Iasacht ábhar
Ailínigh na míreanna
Míreanna
Mír 1
Ailínigh féin
CSS
Coigeartaigh an coimeádán agus na míreanna chun do leagan amach a mhúnlú.

Déantar do leagan amach a thógáil go díreach i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo.

Ceisteanna Coitianta

Cad é an difríocht idir justify-content agus align-items?

Spásálann justify-content na míreanna feadh an phríomhaise — an treo ina sreabhann an ró nó an colún — agus suíonn align-items iad trasna na haise eile. Athraigh an treo ó ró go colún agus babhtálann an dá ais, ionas go dtosaíonn justify-content ag obair ó bharr go bun agus align-items ó chlé go deas.

Conas a oibríonn na rialtáin in aghaidh na míre?

Roghnaigh mír de réir a huimhreach, ansin socraigh cé mhéad a fhásann sí chun spás spártha a líonadh, cé mhéad a chrapann sí nuair atá an spás docht, a méid tosaigh (bunús) agus a hailíniú tras-aise féin. Bogann Order mír níos luaithe nó níos déanaí ar an scáileán gan teagmháil a dhéanamh leis an HTML. Ní fhaigheann ach na míreanna a athraíonn tú i ndáiríre a riail féin sa CSS.

Cathain a bhíonn tábhacht le wrap agus align-content?

Nuair atá timpeallú múchta, cuirtear iallach ar gach mír a bheith ar líne amháin agus is féidir iad a bhrú níos caol. Cuir ar siúl é agus titeann míreanna nach n-oireann a thuilleadh go dtí an chéad líne eile — sin an uair a thógann align-content ceannas, ag spásáil na línte mar ghrúpa. Socraíonn Gap an spás idir míreanna, agus idir línte, gan corrlaigh.

Scríofa agus athbhreithnithe ag foireann eagarthóireachta BroBroGo.Nuashonraithe is déanaí:

Réamhrá ar Ghineadóir Flexbox

Is uirlis idirghníomhach í an Gineadóir Flexbox a ligeann d'úsáideoirí coimeádán flex agus a chuid míreanna a shocrú go radhaircach. Trí rialtáin shimplí a ionramháil, is féidir leat an leagan amach a shainiú, féachaint ar na hathruithe i réamhamharc beo, agus an cód CSS ginte a chóipeáil go díreach le haghaidh do dhearaidh féin.

Tá an uirlis seo thar a bheith úsáideach do dhuine ar bith ar mian leo leagan amach CSS flexbox a dhearadh go radhaircach, dóibh siúd ar gá dóibh cód CSS a ghiniúint go tapa le haghaidh coimeádáin agus míreanna, nó do dhuine ar bith ar mian leo éifeacht airíonna éagsúla flexbox ar leagan amach a thuiscint. Chomh maith leis sin, cabhraíonn sé go mór le leaganacha amach coitianta a chruthú, mar shampla eilimint láraithe, barra nascleanúna, cruach eilimintí, cártaí, nó barra taoibh.

Rialtáin an Choimeádáin

Chun an coimeádán flex a chumrú, soláthraíonn an uirlis roinnt príomhroghanna a athraíonn iompar na míreanna laistigh de:

  • Treo (flex-direction): Is féidir an treo a shocrú mar Ró, Ró droim ar ais, Colún, nó Colún droim ar ais. Má athraítear an treo ó ró go colún, babhtáiltear an phríomhais agus an tras-ais, rud a athraíonn an chaoi a n-oibríonn Iasacht ábhar (justify-content) agus Ailínigh na míreanna (align-items).
  • Timpeallú (flex-wrap): Rialann sé seo an gcoinnítear na míreanna ar líne amháin nó an gceadaítear dóibh fillte. Is iad na roghanna ná Gan timpeallú, Timpeallú, nó Timpeallú droim ar ais. Nuair atá an timpeallú múchta, cuirtear iallach ar gach mír a bheith ar líne amháin. Nuair atá sé ar siúl, titeann na míreanna nach n-oireann go dtí an chéad líne eile.
  • Iasacht ábhar (justify-content): Socraíonn sé seo an t-ailíniú feadh na príomhaise. Is iad na luachanna atá ar fáil ná Tús, Deireadh, Lár, Spás eatarthu, Spás thart timpeall, agus Spás go cothrom.
  • Ailínigh na míreanna (align-items): Ailíníonn sé seo na míreanna feadh na tras-aise. Is féidir é a shocrú mar Tús, Deireadh, Lár, Sín, nó Bunlíne.
  • Ailínigh an t-ábhar (align-content): Nuair atá an timpeallú ar siúl agus míreanna ag titim go línte nua, spásálann an t-airí seo na línte mar ghrúpa. Is iad na roghanna ná Tús, Deireadh, Lár, Sín, Spás eatarthu, Spás thart timpeall, agus Spás go cothrom.
  • Bearna (gap): Luach uimhriúil a shocraíonn an spás idir na míreanna agus idir na línte.

Rialtáin na Míreanna Aonair

Chomh maith leis an gcoimeádán ginearálta, is féidir airíonna gach míre aonair a choigeartú go mion. Nuair a chliceáiltear ar Cuir mír leis, feictear mír nua sa leagan amach (mar shampla, "Mír 5"). Is féidir na hairíonna seo a leanas a shocrú do gach mír:

  • Ord (order): Luach uimhriúil a athraíonn ord taispeána na míre.
  • Fás (flex-grow): Luach uimhriúil a shocraíonn cé mhéad is féidir leis an mír fás chun an spás folamh a líonadh.
  • Crapadh (flex-shrink): Luach uimhriúil a shocraíonn cé mhéad is féidir leis an mír crapadh nuair nach bhfuil go leor spáis ann.
  • Bunús (flex-basis): Luach uimhriúil nó "Uathoibríoch" a shocraíonn méid tosaigh na míre.
  • Ailínigh féin (align-self): Ligeann sé seo do mhír aonair an t-ailíniú ginearálta a shárú. Is iad na roghanna ná Uathoibríoch, Tús, Deireadh, Lár, Sín, nó Bunlíne.

Ní ghintear rialacha CSS ach amháin do na míreanna sin a bhfuil a gcuid airíonna athraithe ag an úsáideoir.

Réamhamharc Beo agus CSS a Ghiniúint

Gineann an uirlis réamhamharc amhairc beo den leagan amach flexbox i bhfíor-am de réir mar a athraítear na rialtáin. Chomh maith leis an réamhamharc, taispeántar an cód CSS ginte don choimeádán flex agus do na míreanna go léir a bhfuil athruithe déanta orthu.

Nuair a chliceálann tú ar an gcnaipe Cóipeáil CSS, athraíonn staid an chnaipe go "Cóipeáilte" chun a thaispeáint go bhfuil an cód cóipeáilte go rathúil chuig do ghearrthaisce.

Príobháideachas agus Próiseáil Sonraí

Déantar do leagan amach a thógáil go díreach i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo.

Ceisteanna Coitianta (FAQ)

Cad é an difríocht idir justify-content agus align-items? Spásálann Iasacht ábhar (justify-content) na míreanna feadh an phríomhaise — an treo ina sreabhann an ró nó an colún — agus suíonn Ailínigh na míreanna (align-items) iad trasna na haise eile. Athraigh an treo ó ró go colún agus babhtálann an dá ais, ionas go dtosaíonn Iasacht ábhar ag obair ó bharr go bun agus Ailínigh na míreanna ó chlé go deas.

Conas a oibríonn na rialtáin in aghaidh na míre? Roghnaigh mír de réir a huimhreach, ansin socraigh cé mhéad a fhásann sí chun spás spártha a líonadh, cé mhéad a chrapann sí nuair atá an spás docht, a méid tosaigh (bunús) agus a hailíniú tras-aise féin. Bogann Ord (order) mír níos luaithe nó níos déanaí ar an scáileán gan teagmháil a dhéanamh leis an HTML. Ní fhaigheann ach na míreanna a athraíonn tú i ndáiríre a riail féin sa CSS.

Cathain a bhíonn tábhacht le wrap agus align-content? Nuair atá timpeallú múchta, cuirtear iallach ar gach mír a bheith ar líne amháin agus is féidir iad a bhrú níos caol. Cuir ar siúl é agus titeann míreanna nach n-oireann a thuilleadh go dtí an chéad líne eile — sin an uair a thógann Ailínigh an t-ábhar (align-content) ceannas, ag spásáil na línte mar ghrúpa. Socraíonn Bearna (gap) an spás idir míreanna, agus idir línte, gan corrlaigh.

Gineadóir CSS Cubic BezierTarraing an dá láimhseáil chun cuar maolaithe a mhúnlú, féach ar phonc ag gluaiseacht air i gcomparáid le ceann seasta, agus cóipeáil an luach cubic-bezier().Gineadóir Border RadiusCruinnigh gach cúinne le sleamhnáin, cruthaigh cruthanna orgánacha leis an modh elipseach, agus cóipeáil an CSS láithreach.Gineadóir Box ShadowTarraing sleamhnáin chun box-shadow a mhúnlú, cruachaigh cisealacha le haghaidh doimhneachta, agus cóipeáil an CSS críochnaithe láithreach.Gineadóir GrádáinTóg grádán líneach, gathach, nó cónach, cuir stadanna datha leis agus socraigh an treo, ansin cóipeáil an CSS le cliceáil amháin.Gineadóir CSS GridSocraigh do cholúin agus do rónta, tarraing trasna na gcealla chun míreanna a chur, agus cóipeáil an CSS greille le HTML meaitseála le cliceáil amháin.Áireamhán CSS clamp()Iontráil méid le haghaidh scáileáin bheaga agus mhóra agus faigh luach sreabhach clamp() a scálaíonn go réidh eatarthu — le haghaidh clómhéideanna, padding, corrlaigh nó bearnaí.Tiontaire DathaTiontaigh dathanna idir HEX, RGB, HSL, HSV, CMYK agus LAB — cuir réimse ar bith in eagar agus nuashonrófar an chuid eile de réir mar a théann tú ar aghaidh.