Jilicsan
Si dhakhso leh u maamul qaabka, toosinta, iyo cabbirka tiirarka xadhkaha, hagidda, qaybaha, iyo in ka badan oo leh qalab buuxa oo ka jawaabaya isticmaalka flexbox. Hirgelinta kakan, CSS caadadii ayaa laga yaabaa inay lagama maarmaan noqoto.
Daar dabeecadaha dabacsanaanta
Codso displayutilities si aad u abuurto weel flexbox oo u beddelo canaasiirta tooska ah ee carruurta walxaha dabacsan Weelasha rogrogmi kara iyo shayada ayaa awood u leh in wax laga beddelo iyada oo leh sifooyin dabacsan oo dheeraad ah.
<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>Kala duwanaansho jawaab celin ah ayaa sidoo kale u jira .d-flexiyo .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
Jihada
Deji jihada walxaha dabacsan weel dabacsan oo leh aaladaha jihada. Inta badan waxaad ka tagi kartaa fasalka jiifka halkan sida browser-ka caadiga ah uu yahay row. Si kastaba ha ahaatee, waxaa laga yaabaa inaad la kulanto xaalado aad u baahan tahay inaad si cad u dejiso qiimahan (sida qaabaynta ka jawaabaya).
Isticmaal .flex-rowsi aad u dejiso jihada toosan (browser default), ama .flex-row-reversesi aad u bilowdo jihada toosan ee dhinaca ka soo horjeeda.
<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>Isticmaal .flex-columnsi aad u dejiso jihada toosan, ama .flex-column-reverseaad uga bilawdo jihada toosan dhinaca ka soo horjeeda.
<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>Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
U cadee waxa ku jira
U adeegso justify-contentagabka weelasha flexbox si aad u bedesho isku xidhka shayada dabacsan ee dhidibka ugu weyn (dhidibka x-bilawga, y- dhidibka haddii flex-direction: column). Ka dooro start(browser default), end, center, between, aroundama 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>
Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
Isku hagaaji walxaha
U adeegso align-itemsagabka weelasha flexbox si aad u bedesho isku xidhka walxaha dabacsan ee dhidibka iskutallaabta ( dhidibka y ee bilaabanaya, dhidibka x- haddii flex-direction: column). Ka dooro start, end, center, baseline, ama stretch(browser 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>
Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
Is waafaji
U adeegso align-selfutilities shayada flexbox si aad shakhsi ahaan u bedesho toosinta dhidibka iskutallaabta ( dhidibka y si uu u bilaabo, x- dhidibka haddii flex-direction: column). Ka dooro isla xulashooyinka align-items: start, end, center, baseline, ama stretch(browser 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>
Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
Buuxi
U adeegso .flex-fillfasalka taxane canaasiir walaalo ah si aad ugu qasbo ballac la mid ah waxa ay ku jiraan (ama ballac siman haddii nuxurkoodu aanu dhaafin santuuqyadooda xuduudka) adiga oo qaadanaya dhammaan meel bannaan oo toosan.
<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>Kala duwanaansho jawaab celin ah ayaa sidoo kale jira flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Kora oo is dhimo
Isticmaal .flex-grow-*utility si aad u beddesho awoodda shay dabacsan si uu u koro si uu u buuxiyo booska bannaan. Tusaalaha hoose, .flex-grow-1canaasiirta waxay adeegsadaan dhammaan meel bannaan oo ay awoodaan, iyagoo u oggolaanaya labada shay ee soo hadhay booskooda lagama maarmaanka ah.
<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>Isticmaal .flex-shrink-*utility si aad u beddesho awoodda shay dabacsanaan ah si uu u yaraado haddii loo baahdo. Tusaalaha hoose, shayga dabacsanaanta labaad ee leh .flex-shrink-1ayaa lagu qasbay inuu ku duubo waxa ku jira xariiq cusub, "soo yaraanaya" si loogu oggolaado meel badan oo shayga dabacsanaanta hore leh .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>Kala duwanaansho jawaab celin ah ayaa sidoo kale u jira flex-growiyo 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
Margin otomaatig ah
Flexbox waxa uu samayn karaa waxyaabo aad u qurux badan marka aad isku darto jaangooyooyinka flex-ka leh iyo margin auto. Hoos waxaa lagu muujiyey saddex tusaale oo lagu xakameynayo walxaha dabacsan iyadoo loo marayo margin otomaatig ah: default (majirin automargin), ku riixida laba shay dhanka midig ( .me-auto), iyo ku riixida laba shay bidix ( .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>Iyada oo walxaha isku toosan
Si toos ah u dhaqaaji hal shay oo dabacsan xagga sare ama hoose ee weelka adoo isku daraya align-items, flex-direction: columnama .margin-top: automargin-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>Duub
Beddel sida walxaha dabacsan ugu duubaan weel dabacsan. Ka dooro wax duub ah haba yaraatee (browser default) leh .flex-nowrap, ku duub .flex-wrap, ama dib ugu laabashada .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>
Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
Dalbo
Beddel qaabka muuqaalka ah ee walxaha dabacsanaansan ee gaarka ah adigoo isticmaalaya qalab fara badan order. Waxaan bixinaa oo kaliya fursadaha samaynta shay marka hore ama u dambeeya, iyo sidoo kale dib u dajin si loo isticmaalo amarka DOM. Sida orderlooga qaato 0 ilaa 5, ku dar CSS caadadii qiima kasta oo dheeri ah oo loo baahan yahay.
<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>Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
Intaa waxaa dheer, sidoo kale waxaa jira ka jawaab celin .order-firstiyo .order-lastfasallo beddela ordercuriyaha iyagoo codsanaya order: -1iyo order: 6, siday u kala horreeyaan.
.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
Isku hagaaji nuxurka
U adeegso align-contentutility weelasha flexbox si aad isugu toosiso shayada dabacsan ee dhidibka iskutallaabta. Ka dooro start(browser default), end, center, between, aroundama stretch. Si aan u muujino adeegyadan, waanu dhaqan galnay flex-wrap: wrapoo aanu kordhinay tirada alaabta dabacsan.
Madaxa kor u qaad! Hantidan wax saamayn ah kuma laha hal saf oo walxaha dabacsan.
<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>
Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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
Warbaahintu
Ma waxaad raadinaysaa inaad ku soo koobto qaybta shayga warbaahinta ee Bootstrap 4? Ku soo celi wakhti yar gudaheed dhowr adeeg oo dabacsan oo u oggolaanaya xitaa dabacsanaan iyo habayn ka badan sidii hore.
<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>Oo waxaad tidhaahdaa waxaad doonaysaa inaad toos u dhex dhigto waxa ku xiga sawirka:
<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
Utility Flexbox waxa lagu caddeeyey adeegyadayada API gudaha scss/_utilities.scss. Baro sida loo isticmaalo API utilities.
"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,
),
),