Ale nan kontni prensipal la Ale nan navigasyon dokiman yo

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
  • .d-xxl-flex
  • .d-xxl-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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, around, oswa evenly.

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
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>
<div class="d-flex justify-content-evenly">...</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-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

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,,endcenter , 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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Aliman pwòp tèt ou

Sèvi ak align-selfsèvis piblik yo 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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-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.

Flex atik ak anpil kontni
Flex atik
Flex atik
<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
  • .flex-xxl-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 ki ladan l nan yon nouvo liy, ki "retresi" 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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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 ( .me-auto), ak pouse de atik sou bò gòch la ( .ms-auto).

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

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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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 soti nan 0 a 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-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

Anplis de sa, gen tou responsive .order-firstak .order-lastklas ki chanje ordernan yon eleman lè yo aplike order: -1ak order: 6, respektivman.

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

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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Objè medya

Èske w ap chèche repwodui eleman objè medya ki soti nan Bootstrap 4? Rekree li nan pa gen tan ak kèk sèvis piblik fleksib ki pèmèt menm plis fleksibilite ak personnalisation pase anvan.

Placeholder Image
Sa a se kèk kontni ki soti nan yon eleman medya. Ou ka ranplase sa a ak nenpòt kontni epi ajiste li jan sa nesesè.
<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>

Epi di ou vle vètikal santre kontni an bò kote imaj la:

Placeholder Image
Sa a se kèk kontni ki soti nan yon eleman medya. Ou ka ranplase sa a ak nenpòt kontni epi ajiste li jan sa nesesè.
<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

Itilite API

Itilite Flexbox yo deklare nan API sèvis piblik nou an nan scss/_utilities.scss. Aprann kijan pou itilize API sèvis piblik yo.

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