Skip to di men tin dɛn we de insay Skip to doks nevigishɔn

Kwik kwik wan manej di layout, alaynɛshɔn, ɛn sayz fɔ grid kɔlɔm dɛn, nevigishɔn, kɔmpɔnɛnt dɛn, ɛn mɔ wit wan ful suit fɔ rispɔnsiv fleksbɔks yutiliti dɛn. Fɔ mɔ kɔmpleks implimɛnt dɛn, kɔstɔm CSS kin nid fɔ de.

Enable fleks bihayvya

Aplay displayyutiliti fɔ mek wan fleksbɔks kɔntena ɛn transfɔm dairekt pikin ɛlimɛnt dɛn to fleks aytem dɛn. Fleks kɔntena ɛn tin dɛn kin ebul fɔ chenj mɔ wit ɔda fleks prɔpati dɛn.

Mi na wan flexbox kɔntena!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Mi na wan inlayn fleksbɔks kɔntena!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Rispɔnsiv difrɛns dɛn de bak fɔ .d-flexɛn .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

We

Set di dairekshɔn fɔ di fleks tin dɛn na wan fleks kɔntena wit dairekshɔn yutiliti dɛn. Bɔku tɛm yu kin pul di ɔrizɔntal klas ya as di brɔwza difɔlt na row. Bɔt yu kin gɛt tin dɛn we yu nid fɔ sɛt dis valyu klia wan (lɛk layout dɛn we de ansa).

Yuz .flex-rowfɔ sɛt ɔrizɔntal dairekshɔn (di brɔwza difɔlt), ɔ .flex-row-reversefɔ stat di ɔrizɔntal dairekshɔn frɔm di ɔda say.

Fleks di aytem 1
Fleks di aytem 2
Fleks di aytem 3
Fleks di aytem 1
Fleks di aytem 2
Fleks di aytem 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>

Yuz .flex-columnfɔ sɛt wan vertikal dairekshɔn, ɔ .flex-column-reversefɔ stat di vertikal dairekshɔn frɔm di ɔpɔzit say.

Fleks di aytem 1
Fleks di aytem 2
Fleks di aytem 3
Fleks di aytem 1
Fleks di aytem 2
Fleks di aytem 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>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Jɔstifay di tin dɛn we de insay

Yuz justify-contentyutiliti dɛn na fleksbɔks kɔntena dɛn fɔ chenj di alaynɛshɔn fɔ fleks aytem dɛn na di men aks (di x-aks fɔ stat, y-aks if flex-direction: column). Pik frɔm start(brawza difɔlt), end, center, between, around, ɔ evenly.

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<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>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Align di tin dɛn

Yuz align-itemsyutiliti dɛn na fleksbɔks kɔntena fɔ chenj di alaynɛshɔn fɔ fleks aytem dɛn na di krɔs aks (di y-aks fɔ stat, x-aks if flex-direction: column). Pik frɔm start, end, center, baseline, ɔ stretch(brɔwza difɔlt).

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<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>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Align yusɛf

Yuz align-selfyutiliti dɛn pan fleksbɔks aytem dɛn fɔ chenj dɛn alaynɛshɔn wan wan pan di krɔs aks (di y-aks fɔ stat, x-aks if flex-direction: column). Pik frɔm di sem tin dɛn we yu kin pik lɛk align-items: start, end, center, baseline, ɔ stretch(browser difɔlt).

Fleks di tin we dɛn de yuz
Alaynɛt fleks aytem
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Alaynɛt fleks aytem
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Alaynɛt fleks aytem
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Alaynɛt fleks aytem
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Alaynɛt fleks aytem
Fleks di tin we dɛn de yuz
<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>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Fil

Yuz di .flex-fillklas pan wan siriɔs brɔda ɛn sista ɛlimɛnt fɔ fos dɛn fɔ mek dɛn gɛt wit we ikwal to dɛn kɔntinyu (ɔ ikwal wit if dɛn kɔntinyu nɔ pas dɛn bɔda-bɔks dɛn) we yu de tek ɔl di ɔrizɔntal spɛs we de.

Fleks item wit bɔku kɔntinyu
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<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>

Rispɔnsiv difrɛns dɛn de bak fɔ flex-fill.

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

Gro ɛn shrink

Yuz .flex-grow-*yutiliti fɔ tɔgl wan fleks aytem in abiliti fɔ gro fɔ ful-ɔp di ples we de. Insay di ɛgzampul we de dɔŋ ya, di .flex-grow-1ɛlimɛnt dɛn de yuz ɔl di spes we de we i ebul, pan ɔl we i de alaw di ɔda tu fleks aytem dɛn fɔ gɛt dɛn spɛs we dɛn nid.

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Tɔd fleks aytem
<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>

Yuz .flex-shrink-*yutiliti fɔ tɔgl wan fleks aytem in abiliti fɔ shrink if nid de. Insay di ɛgzampul we de dɔŋ ya, dɛn fos di sɛkɔn fleks aytem wit .flex-shrink-1fɔ rap di tin dɛn we de insay to nyu layn, “shrinking” fɔ alaw mɔ ples fɔ di fleks aytem we bin de bifo wit .w-100.

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<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>

Rispɔnsiv difrɛns dɛn de bak fɔ flex-growɛn 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

Oto margin dɛn

Flexbox kin du sɔm fayn fayn tin dɛn we yu miks fleks alaynɛshɔn wit ɔto margin. Dɛn sho dɔŋ ya tri ɛgzampul dɛn fɔ kɔntrol fleks tin dɛn bay ɔto margin: difɔlt (nɔ gɛt ɔto margin), fɔ push tu tin dɛn na di rayt say ( .me-auto), ɛn fɔ push tu tin dɛn na di lɛft ( .ms-auto).

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<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>

Wit alaynɛshɔn-aytem dɛn

Muv wan fleks tin we de ɔp ɔ dɔŋ wan kɔntena vertikal wan bay we yu miks align-items, flex-direction: column, ɛn margin-top: autoɔ margin-bottom: auto.

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<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>

Rap

Chenj aw fleks tin dɛn de rap insay fleks kɔntena. Pik frɔm nɔ wrap atɔl (di brɔwza difɔlt) wit .flex-nowrap, wrap wit .flex-wrap, ɔ rivas wrap wit .flex-wrap-reverse.

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex flex-nowrap">
  ...
</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex flex-wrap">
  ...
</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Ɔda

Chenj di vijual ɔda fɔ sɔm patikyula fleks aytem dɛn wit wan anful orderyutiliti dɛn. Wi jɔs de gi opshɔn fɔ mek sɔntin fɔs ɔ las, ɛn bak fɔ riset fɔ yuz di DOM ɔda. As ordertek ɛni intaj valyu frɔm 0 to 5, ad kɔstɔm CSS fɔ ɛni ɔda valyu we nid.

Fɔs fleks aytem
Sɛkɔn fleks aytem
Tɔd fleks aytem
<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>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Apat frɔm dat, dɛn gɛt bak rispɔnsiv .order-firstɛn .order-lastklas dɛn we de chenj di orderɔf wan ɛlimɛnt bay we dɛn de aplay order: -1ɛn order: 6, rispɛktvɔli.

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

Align di tin dɛn we de insay

Yuz align-contentyutiliti dɛn na fleksbɔks kɔntena dɛn fɔ alaynɛd ​​fleks tin dɛn togɛda na di krɔs aks. Pik frɔm start(brawza difɔlt), end, center, between, around, ɔ stretch. Fɔ sho dɛn yutiliti ya, wi dɔn ɛnfɔs flex-wrap: wrapɛn inkrisayz di nɔmba fɔ di fleks tin dɛn.

Hed dɛn de ɔp! Dis prɔpati nɔ gɛt ɛni ifɛkt pan wan row dɛn fɔ fleks tin dɛn.

Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex align-content-end flex-wrap">...</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex align-content-center flex-wrap">...</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex align-content-between flex-wrap">...</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex align-content-around flex-wrap">...</div>
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
Fleks di tin we dɛn de yuz
<div class="d-flex align-content-stretch flex-wrap">...</div>

Rispɔnsiv difrɛns dɛn de bak fɔ 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

Midia ɔbjɛkt

Yu de luk fɔ riplik di midia ɔbjɛkt kɔmpɔnɛnt frɔm Bootstrap 4? Rikriet am in no tɛm wit sɔm fleks yutiliti dɛn we de alaw ivin mɔ fleksibiliti ɛn kɔstɔmayshɔn pas bifo.

Placeholder Image
Dis na sɔm kɔntinyu frɔm wan midia kɔmpɔnɛnt. Yu kin chenj dis wit ɛnitin we de insay ɛn ajɔst am as nid de.
<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>

Ɛn se yu want fɔ sɛnt di tin dɛn we de insay di pikchɔ vertikal wan nia di pikchɔ:

Placeholder Image
Dis na sɔm kɔntinyu frɔm wan midia kɔmpɔnɛnt. Yu kin chenj dis wit ɛnitin we de insay ɛn ajɔst am as nid de.
<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 we bin de

Yutiliti dɛn API

Flexbox yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn API.

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