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
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
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, nó around.
<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>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-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around
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
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
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
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 le hábhar a bhfuil ann a chuimilt 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
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 ( .mr-auto), agus dhá mhír a bhrú ar chlé ( .ml-auto).
Ar an drochuair, ní thacaíonn IE10 agus IE11 i gceart le corrlaigh ghluaisteáin ar mhíreanna solúbtha a bhfuil justify-contentluach neamh-réamhshocraithe ag a dtuismitheoir. Féach an freagra StackOverflow seo le haghaidh tuilleadh sonraí.
<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="mr-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="ml-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
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 (m.sh., 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-6.order-7.order-8.order-9.order-10.order-11.order-12.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-sm-6.order-sm-7.order-sm-8.order-sm-9.order-sm-10.order-sm-11.order-sm-12.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-md-6.order-md-7.order-md-8.order-md-9.order-md-10.order-md-11.order-md-12.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-lg-6.order-lg-7.order-lg-8.order-lg-9.order-lg-10.order-lg-11.order-lg-12.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xl-6.order-xl-7.order-xl-8.order-xl-9.order-xl-10.order-xl-11.order-xl-12
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