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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><div class="d-inline-flex p-2 bd-highlight">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.
<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>Ampiasaina .flex-columnmba hametrahana lalana mitsangana, na .flex-column-reversehanombohana ny lalana mitsangana avy amin'ny lafiny mifanohitra.
<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>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.
<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).
<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).
<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.
<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>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.
<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>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.
<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>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).
<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>Miaraka amin'ny align-item
Alefaso mitsangana mitsangana eo ambony na ambany ny entana iray miodina amin'ny fampifangaroana align-items, flex-direction: column, ary margin-top: autona margin-bottom: auto.
<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>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.
<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.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.
<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>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.
<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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.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.
<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:
<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
),
"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,
),
),