Source

Flex

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!
<div class="d-flex p-2">I'm a flexbox container!</div>
Kaontenera inline flexbox aho!
<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

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
<div class="d-flex flex-row">
  <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
<div class="d-flex flex-column">
  <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

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, na around.

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>

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

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

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

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 ( .mr-auto), ary manosika zavatra roa miankavia ( .ml-auto).

Indrisy anefa, IE10 sy IE11 dia tsy manohana ara-dalàna ny sisin'ny fiara amin'ny zavatra flex izay manana justify-contentsanda tsy misy dikany ny ray aman-dreniny. Jereo ity valiny StackOverflow ity raha mila antsipiriany bebe kokoa.

Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
Flex singa
<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-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
<div class="d-flex align-items-start flex-column" 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" 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

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. Araka orderny maka ny sanda integer (oh, 5), ampio CSS manokana ho an'ny sanda fanampiny ilaina.

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

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