Flex

Byen vit jere layout, aliyman, ak gwosè kolòn kadriyaj, navigasyon, konpozan, ak plis ankò ak yon seri konplè sèvis piblik flexbox ki reponn. Pou aplikasyon ki pi konplèks, CSS koutim ka nesesè.

Pèmèt konpòtman flex

Aplike displaysèvis piblik yo pou kreye yon veso flexbox ak transfòme eleman dirèk timoun yo nan atik flex. Kontenè Flex ak atik yo kapab modifye pi lwen ak pwopriyete fleksib adisyonèl.

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

Varyasyon ki reponn tou egziste pou .d-flexak .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

Direksyon

Mete direksyon atik flex nan yon veso flex ak sèvis piblik direksyon. Nan pifò ka yo, ou ka omisyon klas orizontal isit la kòm default navigatè a se row. Sepandan, ou ka rankontre sitiyasyon kote ou te bezwen klèman mete valè sa a (tankou kouman reponn).

Sèvi ak .flex-rowyo mete yon direksyon orizontal (defo navigatè a), oswa .flex-row-reverseyo kòmanse direksyon orizontal la soti nan bò opoze a.

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

Sèvi ak .flex-columnyo mete yon direksyon vètikal, oswa .flex-column-reverseyo kòmanse direksyon vètikal la soti nan bò opoze a.

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

Varyasyon ki reponn tou egziste pou 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

Jistifye kontni

Sèvi ak justify-contentsèvis piblik sou resipyan flexbox pou chanje aliyman atik flex sou aks prensipal la (aks x pou kòmanse, aks y si flex-direction: column). Chwazi nan start(defo navigatè), end, center, between, oswa 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>

Varyasyon ki reponn tou egziste pou 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

Aliman atik yo

Sèvi ak align-itemssèvis piblik sou resipyan flexbox pou chanje aliyman atik flex sou aks kwa a (aks y pou kòmanse, aks x si flex-direction: column). Chwazi nan start, end, center, baseline, oswa stretch(defo navigatè).

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

Varyasyon ki reponn tou egziste pou 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

Aliman pwòp tèt ou

Sèvi ak align-selfsèvis piblik sou atik flexbox pou chanje endividyèlman aliyman yo sou aks kwa a (aks y pou kòmanse, aks x si flex-direction: column). Chwazi nan menm opsyon yo tankou align-items: start, end, center, baseline, oswa stretch(defo navigatè).

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

Varyasyon ki reponn tou egziste pou 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

Ranpli

Sèvi ak .flex-fillklas la sou yon seri eleman frè ak sè pou fòse yo nan lajè ki egal ak kontni yo (oswa lajè egal si kontni yo pa depase bwat fwontyè yo) pandan y ap pran tout espas orizontal ki disponib.

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

Varyasyon ki reponn tou egziste pou flex-fill.

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

Grandi ak retresi

Sèvi ak .flex-grow-*sèvis piblik pou chanje kapasite yon atik flex pou grandi pou ranpli espas ki disponib. Nan egzanp ki anba a, .flex-grow-1eleman yo sèvi ak tout espas ki disponib li kapab, pandan y ap pèmèt rès de atik fleksib espas ki nesesè yo.

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

Sèvi ak .flex-shrink-*sèvis piblik pou activer kapasite yon atik flex pou retresi si sa nesesè. Nan egzanp ki anba la a, dezyèm atik flex .flex-shrink-1la oblije vlope sa li nan yon nouvo liy, "réduire" pou pèmèt plis espas pou atik flex anvan an ak .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>

Varyasyon ki reponn tou egziste pou flex-growak 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

Marge oto

Flexbox ka fè kèk bagay trè awizom lè ou melanje aliyman flex ak maj oto. Yo montre anba a twa egzanp kontwole atik flex atravè maj oto: default (pa gen maj oto), pouse de atik sou bò dwat la ( .mr-auto), ak pouse de atik sou bò gòch la ( .ml-auto).

Malerezman, IE10 ak IE11 pa byen sipòte maj oto sou atik flex ki gen paran yo gen yon justify-contentvalè ki pa defo. Gade repons StackOverflow sa a pou plis detay.

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

Avèk aliman-atik

Vètikalman deplase yon atik flex nan tèt oswa anba yon veso lè w melanje align-items, flex-direction: column, ak margin-top: autooswa 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>

Vlope

Chanje jan atik flex vlope nan yon veso flex. Chwazi pa gen okenn vlope ditou (defo navigatè a) ak .flex-nowrap, vlope ak .flex-wrap, oswa vlope ranvèse ak .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>

Varyasyon ki reponn tou egziste pou 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

Lòd

Chanje lòd vizyèl atik fleksib espesifik ak yon ti ponyen ordersèvis piblik. Nou sèlman bay opsyon pou fè yon atik premye oswa dènye, osi byen ke yon reset pou itilize lòd DOM la. Kòm orderpran nenpòt valè nonb antye relatif (egzanp, 5), ajoute CSS koutim pou nenpòt valè adisyonèl ki nesesè.

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

Varyasyon ki reponn tou egziste pou 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

Aliman kontni

Sèvi ak align-contentsèvis piblik sou resipyan flexbox pou fè aliman atik flex ansanm sou aks kwa a. Chwazi nan start(defo navigatè), end, center, between, around, oswa stretch. Pou demontre sèvis piblik sa yo, nou te ranfòse flex-wrap: wrapak ogmante kantite atik flex.

Tèt leve! Pwopriyete sa a pa gen okenn efè sou yon sèl ranje atik 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>

Varyasyon ki reponn tou egziste pou 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