Flex
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.
<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>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.
<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.
<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.
<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, end, center, baseline, oswa stretch(defo navigatè).
<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 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è).
<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.
<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.
<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.
<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).
<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.
<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.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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è.
<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.
<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>
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 yo
È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.
<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:
<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,
),
),