Source

Flex

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">I'm a flexbox container!</div>
Tha mi nam inneal flexbox in-loidhne!
<div class="d-inline-flex p-2">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

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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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

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, no around.

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>

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

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

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

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 ( .mr-auto), agus a’ putadh dà rud air an taobh chlì ( .ml-auto).

Gu mì-fhortanach, chan eil IE10 agus IE11 a’ toirt taic cheart do iomaill chàraichean air nithean sùbailte aig a bheil justify-contentluach neo-àbhaisteach aig a phàrant. Faic am freagairt StackOverflow seo airson tuilleadh fiosrachaidh.

Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
Nì Flex
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">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" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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

Ò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 sam bith (me, 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">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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-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

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