Flex
Bainistigh go tapa leagan amach, ailíniú, agus méid na gcolún greille, an loingseoireacht, na comhpháirteanna, agus níos mó le sraith iomlán d'fhóntais flexbox sofhreagracha. Le haghaidh feidhmiúcháin níos casta, d'fhéadfadh go mbeadh gá le CSS saincheaptha.
Cumasaigh iompraíochtaí flex
Cuir displayfóntais i bhfeidhm chun coimeádán fleisc-bhosca a chruthú agus déan na heilimintí díreacha leanaí a thiontú ina n-earraí solúbtha. Is féidir coimeádáin agus míreanna flex a mhodhnú tuilleadh le hairíonna flex breise.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>Tá éagsúlachtaí sofhreagracha ann freisin do .d-flexagus .d-inline-flex.
.d-flex.d-inline-flex.d-sm-flex.d-sm-inline-flex.d-md-flex.d-md-inline-flex.d-lg-flex.d-lg-inline-flex.d-xl-flex.d-xl-inline-flex.d-xxl-flex.d-xxl-inline-flex
Treo
Socraigh treo na míreanna flex i gcoimeádán flex le fóntais treo. I bhformhór na gcásanna is féidir leat an rang cothrománach a fhágáil ar lár anseo mar is é réamhshocraithe an bhrabhsálaí row. Mar sin féin, seans go dtiocfaidh tú ar chásanna ina raibh ort an luach seo a shocrú go sainráite (cosúil le leagan amach sofhreagrach).
Bain úsáid as .flex-rowchun treo cothrománach a shocrú (réamhshocrú an bhrabhsálaí), nó .flex-row-reversechun an treo cothrománach a thosú ón taobh eile.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>Bain úsáid as .flex-columntreo ingearach a shocrú, nó .flex-column-reversechun an treo ingearach a thosú ón taobh eile.
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>Tá éagsúlachtaí sofhreagracha ann freisin do flex-direction.
.flex-row.flex-row-reverse.flex-column.flex-column-reverse.flex-sm-row.flex-sm-row-reverse.flex-sm-column.flex-sm-column-reverse.flex-md-row.flex-md-row-reverse.flex-md-column.flex-md-column-reverse.flex-lg-row.flex-lg-row-reverse.flex-lg-column.flex-lg-column-reverse.flex-xl-row.flex-xl-row-reverse.flex-xl-column.flex-xl-column-reverse.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-column-reverse
Cosain ábhar
Bain úsáid as justify-contentfóntais ar choimeádáin flexbox chun ailíniú na míreanna flex ar an bpríomhais a athrú (an x-ais le tosú, y-ais más rud é flex-direction: column). Roghnaigh ó start(réamhshocraithe brabhsálaí), end, center, , between, around, nó evenly.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Tá éagsúlachtaí sofhreagracha ann freisin do justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
Ailínigh míreanna
Bain úsáid as align-itemsfóntais ar choimeádáin flexbox chun ailíniú na míreanna flex a athrú ar an tras-ais (an y-ais le tosú, x-ais más rud é flex-direction: column). Roghnaigh ó start, end, , center, baseline, nó stretch(réamhshocraithe brabhsálaí).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Tá éagsúlachtaí sofhreagracha ann freisin do align-items.
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-items-sm-start.align-items-sm-end.align-items-sm-center.align-items-sm-baseline.align-items-sm-stretch.align-items-md-start.align-items-md-end.align-items-md-center.align-items-md-baseline.align-items-md-stretch.align-items-lg-start.align-items-lg-end.align-items-lg-center.align-items-lg-baseline.align-items-lg-stretch.align-items-xl-start.align-items-xl-end.align-items-xl-center.align-items-xl-baseline.align-items-xl-stretch.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Ailínigh féin
Úsáid align-selffóntais ar mhíreanna flexbox chun a n-ailíniú ar an tras-ais a athrú ina n-aonar (an y-ais le tosú, x-ais más rud é flex-direction: column). Roghnaigh ó na roghanna céanna le align-items: start, end, center, , baseline, nó stretch(réamhshocraithe brabhsálaí).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
Tá éagsúlachtaí sofhreagracha ann freisin do align-self.
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-self-sm-start.align-self-sm-end.align-self-sm-center.align-self-sm-baseline.align-self-sm-stretch.align-self-md-start.align-self-md-end.align-self-md-center.align-self-md-baseline.align-self-md-stretch.align-self-lg-start.align-self-lg-end.align-self-lg-center.align-self-lg-baseline.align-self-lg-stretch.align-self-xl-start.align-self-xl-end.align-self-xl-center.align-self-xl-baseline.align-self-xl-stretch.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Líon
Úsáid an .flex-fillrang ar shraith d’eilimintí siblín chun iad a bhrú isteach ar leithead atá cothrom lena n-ábhar (nó leithead comhionann mura dtéann a n-ábhar thar a mboscaí teorann) agus an spás cothrománach ar fad á ghlacadh agat.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>Tá éagsúlachtaí sofhreagracha ann freisin do flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Fás agus Laghdaigh
Bain úsáid as .flex-grow-*fóntais chun cumas ítim flex a fhás chun an spás atá ar fáil a líonadh a scor. Sa sampla thíos, .flex-grow-1úsáideann na heilimintí go léir spás atá ar fáil is féidir, agus ceadaíonn an dá mhír flex eile a spás riachtanach.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>Bain úsáid as .flex-shrink-*fóntais chun cumas ítim flex a chrapadh más gá. Sa sampla thíos, cuirtear .flex-shrink-1iallach ar an dara mír fleisc a bhfuil ann a fhilleadh go líne nua, “ag crapadh” chun níos mó spáis a cheadú don mhír flex roimhe sin le .w-100.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>Tá éagsúlachtaí sofhreagracha ann freisin do flex-growagus flex-shrink.
.flex-{grow|shrink}-0.flex-{grow|shrink}-1.flex-sm-{grow|shrink}-0.flex-sm-{grow|shrink}-1.flex-md-{grow|shrink}-0.flex-md-{grow|shrink}-1.flex-lg-{grow|shrink}-0.flex-lg-{grow|shrink}-1.flex-xl-{grow|shrink}-0.flex-xl-{grow|shrink}-1.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
Corrlaigh uathoibríoch
Is féidir le Flexbox roinnt rudaí iontacha a dhéanamh nuair a mheascann tú ailíniúcháin flex le corrlaigh uathoibríoch. Taispeántar thíos trí shampla de mhíreanna flex a rialú trí chorrlaigh uathoibríocha: réamhshocrú (gan corrlach uathoibríoch), dhá mhír a bhrú ar dheis ( .me-auto), agus dhá mhír a bhrú ar chlé ( .ms-auto).
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>Le hailíniú-ítimí
Bog rud solúbtha amháin go hingearach go barr nó bun coimeádáin trí mheascadh align-items, flex-direction: column, agus margin-top: autonó margin-bottom: auto.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>Wrap
Athraigh an chaoi a gcaitheann míreanna solúbtha i gcoimeádán solúbtha. Roghnaigh gan aon timfhilleadh ar chor ar bith (réamhshocraithe an bhrabhsálaí) le .flex-nowrap, timfhilleadh le .flex-wrap, nó aisiompaigh an timfhilleadh le .flex-wrap-reverse.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
Tá éagsúlachtaí sofhreagracha ann freisin do flex-wrap.
.flex-nowrap.flex-wrap.flex-wrap-reverse.flex-sm-nowrap.flex-sm-wrap.flex-sm-wrap-reverse.flex-md-nowrap.flex-md-wrap.flex-md-wrap-reverse.flex-lg-nowrap.flex-lg-wrap.flex-lg-wrap-reverse.flex-xl-nowrap.flex-xl-wrap.flex-xl-wrap-reverse.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Ordú
Athraigh ord amhairc na míreanna solúbtha sonracha le dornán orderfóntais. Ní chuirimid ar fáil ach roghanna chun earra a dhéanamh ar dtús nó ar deireadh, chomh maith le hathshocrú chun ordú DOM a úsáid. Mar ordera thógann aon luach slánuimhir ó 0 go 5, cuir CSS saincheaptha le haghaidh aon luachanna breise a theastaíonn.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>Tá éagsúlachtaí sofhreagracha ann freisin do order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Ina theannta sin tá aicmí sofhreagracha .order-firstagus .order-lasta athraíonn ordergné eilimint trí iarratas a dhéanamh order: -1agus order: 6, faoi seach.
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Ailínigh ábhar
Úsáid align-contentfóntais ar choimeádáin flexbox chun míreanna flex a ailíniú le chéile ar an tras-ais. Roghnaigh ó start(réamhshocraithe brabhsálaí), end, center, , between, around, nó stretch. Chun na fóntais seo a léiriú, rinneamar flex-wrap: wraplíon na míreanna solúbtha a fhorghníomhú agus a mhéadú.
Cinnirí suas! Níl aon éifeacht ag an maoin seo ar shraitheanna aonair míreanna flex.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
Tá éagsúlachtaí sofhreagracha ann freisin do align-content.
.align-content-start.align-content-end.align-content-center.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-around.align-content-xl-stretch.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Réad meáin
Ag féachaint le comhpháirt oibiachta meán ó Bootstrap 4 a mhacasamhlú ? Déan é a athchruthú in am ar bith le cúpla fóntais flex a cheadaíonn níos mó solúbthachta agus saincheaptha ná riamh.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Agus abair gur mhaith leat an t-ábhar a lárú go hingearach in aice leis an íomhá:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Sass
Utilities API
Déantar fóntais Flexbox a dhearbhú inár n-API fóntais i scss/_utilities.scss. Foghlaim conas an API fóntais a úsáid.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),