Cruthaigh Bosca Flex Foirfe Leagan Amach

Airíonna Coimeádáin

Airíonna

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Cód

Coitianta Flexbox Réamhshocraithe

Ionad Cothrománach

Content

Foirfe chun lógó, cnaipe, nó aon eilimint a lárnú go cothrománach agus go hingearach.

Spásáil

Item 1
Item 2
Item 3

Cruthaigh spásáil chomhionann idir eilimintí le spás-idir nó spás-timpeall.

Roghchlár Ingearach

Home
About
Contact

Tóg roghchlár nascleanúna ingearach le spásáil agus ailíniú comhsheasmhach.

Greille Sofhreagrach

Box 1
Box 2
Box 3
Box 4
Box 5

Cruthaigh leagan amach greille sofhreagrach a fhilleann míreanna bunaithe ar spás atá ar fáil.

Dearadh

Príomh-Rannóg Laoch Teideal

le glao chun gnímh

meirge laoch le teideal, fotheideal, agus cnaipe glaoch chun gnímh.

Leagan Amach Footer

Company

About Us

Careers

Support

Cabhrach

Déan Teagmháil Linn

© 2023 Gineadóir

Tóg buntásc sofhreagrach le colúin a chruachann ar scáileáin níos lú.

Fíor-Domhain

Barra Nascleanúna

Logo
Home
Products
About
Contact

Leagan amach barra nascleanúna coitianta le lógó ar chlé, míreanna roghchláir sa lár, agus deilbhín cart ar dheis.

Card Grid

Cárta Teideal

cur síos

Téacs

cur síos

Cárta Teideal

cur síos ar chárta Teideal

Greille cárta sofhreagrach a chuireann in oiriúint do mhéideanna éagsúla scáileáin ag baint úsáide as airíonna flexbox.

Leagan Amach Airteagal

Teideal

an ailt Postáilte ar Eanáir 1, 2023 · 5 min léigh

Ábhar an ailt anseo. D'fhéadfadh sé seo a bheith ina achoimre ghearr nó téacs iomlán an ailt. Cuidíonn Flexbox leis an íomhá agus an téacs a ailíniú ar bhealach tarraingteach ó thaobh amhairc de.

Leagan amach alt coitianta le híomhá ar chlé agus ábhar téacs ar dheis, cruachta ar ghléasanna soghluaiste.

Dashboard Leagan Amach

Header
Sidebar
Príomhábhar
Footer

amach painéal an phainéil le ceanntásc, barra taobh, príomhlimistéar ábhair, agus buntásc ag baint úsáide as flexbox le haghaidh ailíniú cothrománach agus ingearach araon.

Luchtaigh Bunúsacha

Cad é Flexbox?

Is samhail leagan amach CSS3 é Leagan Amach Bosca Solúbtha, ar a dtugtar Flexbox go coitianta, a sholáthraíonn bealach éifeachtach chun spás a dháileadh agus a ailíniú i measc míreanna i gcoimeádán, fiú nuair a bhíonn a méid anaithnid nó dinimiciúil.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Príomhchoincheapa:Tugann Flexbox dhá phríomhchoincheap isteach: nacoimeádán and the míreanna Is é an coimeádán an mháthair-eilimint, agus is iad na míreanna a leanaí díreacha.

Príomh-Ais vs Tras-Ais

Tá leagan amach Flexbox bunaithe ar dhá ais: anmain axis and the tras-ais<b1111> ← Airíonna . Téacs Bonn Easpórtála Stíl Beo Stíl Láidir Earráide.

  • Príomh-Ais:An ais phríomhúil ar a bhfuil míreanna flex leagtha amach. Sainmhínithe agflex-direction.
  • Tras-Ais:An ais ingearach leis an bpríomhais. Braitheann a threo ar threo na príomhaise.
Príomh-Ais →
Tras-Ais
Start
Main
End

Coimeádán

Property Description
display Sainmhíníonn coimeádán flex; inlíne nó bloc ag brath ar an luach a thugtar dó.
flex-direction Bunaíonn sé an phríomhais, agus ar an gcaoi sin sainmhíníonn sé an treo a chuirtear míreanna flex sa choimeádán flex
flex-wrap De réir réamhshocraithe, déanfaidh míreanna flex iarracht go léir a bheith oiriúnach ar líne amháin. Is féidir leat é sin a athrú agus ligean do na míreanna filleadh de réir mar is gá leis an maoin seo.
justify-content Ailíníonn míreanna flex feadh phríomhais líne reatha an choimeádáin flex.
align-items Ailíníonn míreanna flex feadh ais trasna líne reatha an choimeádáin flex.
align-content Ailíníonn línte coimeádán flex taobh istigh nuair a bhíonn spás breise sa tras-ais.

Airíonna Mír

Property Description
order De réir réamhshocraithe, leagtar amach míreanna flex san ord foinse. Mar sin féin, rialaíonn anordermhaoin an t-ord ina bhfuil siad le feiceáil sa choimeádán flex.
flex-grow Sainmhíníonn sé an cumas do mhír flex fás más gá. Glacann sé le luach gan aonad a fheidhmíonn mar chomhréir.
flex-shrink Sainmhíníonn sé an cumas do mhír flex crapadh más gá.
flex-basis Sainmhíníonn sé méid tosaigh earra flex sula ndéantar aon spás atá ar fáil a dháileadh de réir na bhfachtóirí flex.
align-self Ceadaíonn sé an t-ailíniú réamhshocraithe (nó an ceann atá sonraithe agalign-items) a shárú le haghaidh míreanna flex aonair.

Related Tools

Tiontaire Stíl go CSS

Tapa, éasca agus slán.

Tiontaire SCSS go CSS

Athraigh do chód SCSS go CSS. Tapa, éasca agus slán.

Tiontaire Sass go CSS

Athraigh do chód Sass go CSS. Tapa, éasca agus slán.

Gineadóir Ga Teorann

Uirlis Gineadóir CSS teorann-ga chun dearbhuithe CSS ga teorann a ghiniúint go tapa.

Tiontaire CSS go SASS

Athraigh do chód CSS i gcomhréir SASS indented. Tapa, éasca agus slán.

Áireamhán Aoise

Ríomh d'aois chruinn i mblianta, míonna agus laethanta lenár n-áireamhán aoise beacht.