Source

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.

Mwen se yon veso flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Mwen se yon veso flexbox inline!
<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.

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

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.

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

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.

Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<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è).

Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<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è).

Flex atik
Atik fleksib ki aliyen
Flex atik
Flex atik
Atik fleksib ki aliyen
Flex atik
Flex atik
Atik fleksib ki aliyen
Flex atik
Flex atik
Atik fleksib ki aliyen
Flex atik
Flex atik
Atik fleksib ki aliyen
Flex atik
<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 menm lajè pandan w ap pran tout espas orizontal ki disponib. Espesyalman itil pou navigasyon egal-lajè, oswa jistifye.

Flex atik
Flex atik
Flex atik
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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.

Flex atik
Flex atik
Twazyèm atik 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>

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.

Flex atik
Flex atik
<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.

Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<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.

Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<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.

Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex flex-nowrap">
  ...
</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex flex-wrap">
  ...
</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<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è.

Premye atik flex
Dezyèm atik fleksib
Twazyèm atik 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>

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.

Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex align-content-end flex-wrap">...</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex align-content-center flex-wrap">...</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex align-content-between flex-wrap">...</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<div class="d-flex align-content-around flex-wrap">...</div>
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
Flex atik
<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