Rach gu prìomh shusbaint Air adhart gu seòladh docs

Stiùirich gu sgiobalta cruth, co-thaobhadh, agus meud colbhan clèithe, seòladh, co-phàirtean, agus barrachd le làn shreath de ghoireasan flexbox freagairteach. Airson buileachadh nas iom-fhillte, is dòcha gum bi feum air CSS àbhaisteach.

Dèan comas air giùlan sùbailte

Cuir a-steach displaygoireasan gus inneal bogsa flex a chruthachadh agus atharraich eileamaidean cloinne dìreach gu bhith nan nithean sùbailte. Faodar soithichean sùbailte agus nithean atharrachadh tuilleadh le feartan sùbailte a bharrachd.

Tha mi nam flexbox container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Tha mi nam inneal flexbox in-loidhne!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson .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

Stiùir

Suidhich stiùireadh nithean sùbailte ann an soitheach sùbailte le goireasan stiùiridh. Anns a’ mhòr-chuid de chùisean faodaidh tu an clas còmhnard fhàgail air falbh an seo oir is e row. Ach, is dòcha gun tig thu tarsainn air suidheachaidhean far am feumadh tu an luach seo a shuidheachadh gu soilleir (leithid cruth freagairteach).

Cleachd .flex-rowgus stiùireadh còmhnard a shuidheachadh (bunaiteach a’ bhrabhsair), no .flex-row-reversegus an t-slighe chòmhnard a thòiseachadh bhon taobh eile.

Flex nì 1
Flex nì 2
Flex nì 3
Flex nì 1
Flex nì 2
Flex nì 3
<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>

Cleachd .flex-columnairson stiùireadh dìreach a shuidheachadh, no .flex-column-reversegus an t-slighe dhìreach a thòiseachadh bhon taobh eile.

Flex nì 1
Flex nì 2
Flex nì 3
Flex nì 1
Flex nì 2
Flex nì 3
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Fìreanachadh susbaint

Cleachd justify-contentgoireasan air soithichean flexbox gus co-thaobhadh nithean sùbailte air a’ phrìomh axis atharrachadh (an x-axis airson tòiseachadh, y-axis ma tha flex-direction: column). Tagh bho start(brabhsair bunaiteach), end, center, , between, around, no evenly.

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Co-thaobhadh nithean

Cleachd align-itemsgoireasan air soithichean flexbox gus co-thaobhadh nithean sùbailte air a’ chrois-axis atharrachadh (an y-axis airson tòiseachadh, x-axis ma tha flex-direction: column). Tagh bho start, end, , center, baseline, no stretch(bunaiteach am brabhsair).

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Co-thaobhadh fhèin

Cleachd align-selfgoireasan air nithean flexbox gus an co-thaobhadh aca atharrachadh leotha fhèin air a’ chrois-axis (an y-axis airson tòiseachadh, x-axis ma tha flex-direction: column). Tagh bho na h-aon roghainnean ri align-items: start, end, , , center, baseline, no stretch(àbhaisteach brabhsair).

Nì Flex
Nì flex co-thaobhadh
Nì Flex
Nì Flex
Nì flex co-thaobhadh
Nì Flex
Nì Flex
Nì flex co-thaobhadh
Nì Flex
Nì Flex
Nì flex co-thaobhadh
Nì Flex
Nì Flex
Nì flex co-thaobhadh
Nì Flex
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Cleachd an .flex-fillclas air sreath de eileamaidean bràithrean gus an toirt gu leudan co-ionann ris an t-susbaint aca (no leud co-ionann mura h-eil an susbaint aca a’ dol thairis air na bogsaichean crìche aca) fhad ‘s a tha thu a’ gabhail a-steach a h-uile àite còmhnard a tha ri fhaighinn.

Nì Flex le tòrr susbaint
Nì Flex
Nì Flex
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Fàs agus crìonadh

Cleachd .flex-grow-*goireasan gus comas nì sùbailte a thogail gus fàs gus an àite a tha ri fhaighinn a lìonadh. Anns an eisimpleir gu h-ìosal, bidh na h- .flex-grow-1eileamaidean a’ cleachdadh a h-uile àite a tha ri fhaighinn, agus aig an aon àm a’ leigeil leis an dà rud sùbailte a tha air fhàgail an àite riatanach fhaighinn.

Nì Flex
Nì Flex
An treas nì flex
<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>

Cleachd .flex-shrink-*goireasan gus comas nì sùbailte a lughdachadh ma tha sin riatanach. Anns an eisimpleir gu h-ìosal, .flex-shrink-1thathas a’ sparradh air an dàrna nì sùbailte a shusbaint a phasgadh gu loidhne ùr, “a’ crìonadh” gus barrachd àite a cheadachadh airson an rud sùbailte a bh’ ann roimhe le .w-100.

Nì Flex
Nì Flex
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Iomall fèin-ghluasadach

Faodaidh Flexbox rudan gu math uamhasach a dhèanamh nuair a bhios tu a’ measgachadh co-thaobhadh sùbailte le oirean fèin-ghluasadach. Gu h-ìosal tha trì eisimpleirean de bhith a’ cumail smachd air nithean sùbailte tro iomaill fèin-ghluasadach: bunaiteach (gun iomall fèin-ghluasadach), a’ putadh dà rud air an taobh cheart ( .me-auto), agus a’ putadh dà rud air an taobh chlì ( .ms-auto).

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<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 nithean co-thaobhadh

Gluais gu dìreach aon rud sùbailte gu mullach no bonn soitheach le bhith a’ measgachadh align-items, flex-direction: column, agus margin-top: autono margin-bottom: auto.

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<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>

Còmhdaich

Atharraich mar a bhios nithean sùbailte a’ pasgadh ann an soitheach sùbailte. Tagh bho nach eil còmhdach sam bith ann (am brobhsair bunaiteach) le .flex-nowrap, paisg le .flex-wrap, no cuir air ais pacadh le .flex-wrap-reverse.

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex flex-wrap">
  ...
</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Òrdugh

Atharraich òrdugh lèirsinneach nithean sùbailte sònraichte le dòrlach de orderghoireasan. Cha toir sinn seachad ach roghainnean airson rud a dhèanamh an toiseach no mu dheireadh, a bharrachd air ath-shuidheachadh gus an òrdugh DOM a chleachdadh. Mar ordera bheir luach iomlan bho 0 gu 5, cuir CSS àbhaisteach airson luachan a bharrachd a tha a dhìth.

A 'chiad nì flex
An dàrna nì flex
An treas nì flex
<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>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

A bharrachd air an sin tha clasaichean freagairteach .order-firstagus freagairteach ann a dh’ atharraicheas eileamaid le bhith a’ cur a -steach agus , fa leth..order-lastorderorder: -1order: 6

  • .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

Co-thaobhadh susbaint

Cleachd align-contentgoireasan air soithichean flexbox gus nithean sùbailte a cho-thaobhadh ri chèile air a’ chrois-axis. Tagh bho start(brabhsair bunaiteach), end, center, , between, around, no stretch. Gus na goireasan sin a nochdadh, tha sinn air flex-wrap: wrapan àireamh de nithean sùbailte a chuir an gnìomh agus àrdachadh.

Cinn suas! Chan eil buaidh sam bith aig an togalach seo air sreathan singilte de nithean sùbailte.

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

Tha eadar-dhealachaidhean freagairteach ann cuideachd airson 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

Rud meadhanan

A 'coimhead ri ath-riochdachadh a' phàirt stuth mheadhanan bho Bootstrap 4? Dèan ath-chruthachadh ann an ùine sam bith le beagan ghoireasan sùbailte a leigeas le eadhon barrachd sùbailteachd agus gnàthachadh na bha iad roimhe.

Placeholder Image
Seo beagan susbaint bho phàirt mheadhanan. Faodaidh tu susbaint sam bith a chuir na àite agus atharrachadh mar a dh ’fheumar.
<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 gu bheil thu airson an susbaint a mheadhanachadh gu dìreach ri taobh na h-ìomhaigh:

Placeholder Image
Seo beagan susbaint bho phàirt mheadhanan. Faodaidh tu susbaint sam bith a chuir na àite agus atharrachadh mar a dh ’fheumar.
<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

Tha goireasan Flexbox air an ainmeachadh anns na goireasan API againn ann an scss/_utilities.scss. Ionnsaich mar a chleachdas tu an API Utilities.

    "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,
      ),
    ),