Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
Check

Tantano haingana ny fandrindrana, ny fampifanarahana ary ny haben'ny tsanganana grid, ny fitetezana, ny singa ary ny maro hafa miaraka amin'ny kojakoja feno flexbox mandray andraikitra. Ho an'ny fampiharana sarotra kokoa, mety ilaina ny CSS manokana.

Alefaso ny fitondran-tena flexibilité

Ampiharo displayfitaovana hamoronana kaontenera flexbox ary hanova ireo singa mivantana ho an'ny ankizy ho zavatra flex. Ny kaontenera sy ny entana Flex dia azo ovaina bebe kokoa miaraka amin'ny fananana flex fanampiny.

Kaontenera flexbox aho!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Kaontenera inline flexbox aho!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Misy fiovana mamaly ihany koa ho an'ny .d-flexsy .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

tari-dalana

Apetraho ao anaty fitoeran-jiro flex ny toromarika misy ny zavatra flex miaraka amin'ny fitaovana fitarihana. Amin'ny ankabeazan'ny tranga dia azonao atao ny manala ny kilasy horizontaly eto satria ny navigateur default dia row. Na izany aza, mety ho tojo toe-javatra ilainao hametrahana mazava io sanda io ianao (toy ny fandrindrana mandray andraikitra).

Ampiasaina .flex-rowmba hametrahana lalana marindrano (ny navigateur default), na .flex-row-reversehanombohana ny lalana marindrano avy amin'ny lafiny mifanohitra.

Flex singa 1
flex item 2
Flex item 3
Flex singa 1
flex item 2
Flex item 3
html
<div class="d-flex flex-row mb-3">
  <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>

Ampiasaina .flex-columnmba hametrahana lalana mitsangana, na .flex-column-reversehanombohana ny lalana mitsangana avy amin'ny lafiny mifanohitra.

Flex singa 1
flex item 2
Flex item 3
Flex singa 1
flex item 2
Flex item 3
html
<div class="d-flex flex-column mb-3">
  <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>

Misy fiovana mamaly ihany koa ho an'ny 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

Manamarina ny votoatiny

Mampiasà justify-contentfitaovana amin'ny kaontenera flexbox hanovana ny fampifanarahana ny zavatra flex amin'ny axe lehibe (ny axes x hanombohana, axis y raha flex-direction: column). Misafidiana avy amin'ny start(fandaharana default), end, center, between, around, na evenly.

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

Misy fiovana mamaly ihany koa ho an'ny 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

Ampifanaraho ireo singa

Mampiasà align-itemsfitaovana amin'ny kaontenera flexbox hanovana ny fampifanarahana ireo zavatra flex eo amin'ny axe cross (ny axis y hanombohana, x-axis raha flex-direction: column). Safidio amin'ny start, end, center, baseline, na stretch(ny navigateur default).

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

Misy fiovana mamaly ihany koa ho an'ny 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

Ampifanaraho ny tena

Mampiasà align-selffitaovana amin'ny entana flexbox mba hanovana tsirairay ny filaharan'izy ireo amin'ny axe cross (ny axis y hanombohana, x-axis raha flex-direction: column). Safidio amin'ireo safidy mitovy amin'ny align-items: start, end, center, baseline, na stretch(ny navigateur default).

Flex singa
Zavatra flex mifanentana
Flex singa
Flex singa
Zavatra flex mifanentana
Flex singa
Flex singa
Zavatra flex mifanentana
Flex singa
Flex singa
Zavatra flex mifanentana
Flex singa
Flex singa
Zavatra flex mifanentana
Flex singa
<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>

Misy fiovana mamaly ihany koa ho an'ny 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

afa-po

Ampiasao ny .flex-fillkilasy amin'ny andiana singa iray mba hanerena azy ireo amin'ny sakany mitovy amin'ny atiny (na mitovy sakany raha toa ka tsy mihoatra ny boaty sisintany ny atiny) sady maka ny habaka marindrano rehetra misy.

Zavatra flex misy votoaty be dia be
Flex singa
Flex singa
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Misy fiovana mamaly ihany koa ho an'ny flex-fill.

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

Mitombo sy mihena

Mampiasà .flex-grow-*fitaovam-pampitam-pitaovana mba hanodinana ny fahafahan'ny zavatra flex hitombo mba hamenoana toerana malalaka. Ao amin'ny ohatra etsy ambany, ny .flex-grow-1singa dia mampiasa ny habaka rehetra azony atao, raha mamela ny zavatra roa flex sisa tavela ho azy ireo.

Flex singa
Flex singa
Zavatra flex fahatelo
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Mampiasà .flex-shrink-*fitaovana ampiasaina hanodinana ny fahafahan'ny zavatra flex hihena raha ilaina. Ao amin'ny ohatra etsy ambany, ny singa flex faharoa misy .flex-shrink-1dia voatery mamatotra ny atiny amin'ny tsipika vaovao, "mihena" mba hamela toerana bebe kokoa ho an'ny entana flex teo aloha miaraka amin'ny .w-100.

Flex singa
Flex singa
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Misy fiovana mamaly ihany koa ho an'ny flex-growsy 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

Auto margins

Flexbox dia afaka manao zavatra mahafinaritra rehefa mampifangaro ny alignments flex miaraka amin'ny sisin'ny fiara ianao. Aseho eto ambany ny ohatra telo amin'ny fanaraha-maso ireo zavatra flex amin'ny alàlan'ny sisiny mandeha ho azy: default (tsy misy sisiny mandeha ho azy), manosika singa roa miankavanana ( .me-auto), ary manosika zavatra roa miankavia ( .ms-auto).

Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
html
<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Miaraka amin'ny align-item

Atsofohy mitsangana mitsangana eo ambony na ambany ny singa iray miolikolika amin'ny fampifangaroana ny align-items, flex-direction: column, ary margin-top: autona margin-bottom: auto.

Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
html
<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

Fonosana

Ovay ny fomba famonosana entana flex ao anaty fitoeran-javatra flex. Misafidiana amin'ny tsy misy fonony mihitsy (ny navigateur default) miaraka amin'ny .flex-nowrap, famonosana miaraka amin'ny .flex-wrap, na mifamadika amin'ny .flex-wrap-reverse.

Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex flex-nowrap">
  ...
</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex flex-wrap">
  ...
</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Misy fiovana mamaly ihany koa ho an'ny 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

mba

Ovay ny filaharan'ny maso amin'ny singa flex manokana miaraka amin'ny fitaovana vitsivitsy order. Safidy amin'ny fanaovana zavatra voalohany na farany ihany no omenay, ary koa ny famerenana amin'ny fampiasana ny baiko DOM. Raha ordermaka sanda integer avy amin'ny 0 ka hatramin'ny 5, ampio CSS manokana ho an'ny sanda fanampiny ilaina.

Zavatra flex voalohany
Zavatra flex faharoa
Zavatra flex fahatelo
html
<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>

Misy fiovana mamaly ihany koa ho an'ny 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

Fanampin'izany dia misy ihany koa ireo kilasy mamaly .order-firstsy .order-lastmanova ny ordersinga iray amin'ny fampiharana order: -1sy order: 6, tsirairay avy.

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

Ahitsio votoaty

Mampiasà align-contentfitaovana amin'ny kaontenera flexbox mba hampifanaraka ireo entana flex miaraka amin'ny axis cross. Misafidiana avy amin'ny start(fandaharana default), end, center, between, around, na stretch. Mba hampisehoana ireo fitaovana ireo dia nampiharina flex-wrap: wrapsy nampitomboinay ny isan'ny entana flex.

Fampitandremana! Ity fananana ity dia tsy misy fiantraikany amin'ny andalana tokana amin'ny singa flex.

Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex align-content-end flex-wrap">...</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex align-content-center flex-wrap">...</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex align-content-between flex-wrap">...</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex align-content-around flex-wrap">...</div>
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex align-content-stretch flex-wrap">...</div>

Misy fiovana mamaly ihany koa ho an'ny align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Media object

Mitady hamerenana ny singa haino aman -jery avy amin'ny Bootstrap 4? Avereno averina ao anatin'ny fotoana fohy miaraka amin'ny kojakoja flexibilité vitsivitsy izay manome fahafahana bebe kokoa sy fanamboarana kokoa noho ny teo aloha.

Placeholder Image
Ity dia votoaty sasantsasany avy amin'ny singa media. Azonao atao ny manolo izany amin'ny atiny rehetra ary manitsy azy araka izay ilaina.
html
<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>

Ary lazao fa tianao ny hampifantoka ny atiny eo akaikin'ny sary:

Placeholder Image
Ity dia votoaty sasantsasany avy amin'ny singa media. Azonao atao ny manolo izany amin'ny atiny rehetra ary manitsy azy araka izay ilaina.
html
<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

Utilities API

Flexbox utility dia nambara ao amin'ny utility API ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility 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
    ),
    "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,
      ),
    ),