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.
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.
<div class="d-flex p-2">I'm a flexbox container!</div><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
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.
<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.
<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
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.
<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
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).
<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
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).
<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
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.
<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>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.
<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>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.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><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
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.
<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
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.
<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>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