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.
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
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-reversesi aad u bilowdo jihada toosan ee 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
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, ama 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>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-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
U adeegso align-itemsagabka weelasha flexbox si aad u bedesho isku xidhka shayada 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
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
U isticmaal .flex-fillfasalka taxanaha canaasiirta walaalaha ah si aad ugu qasbo ballac ahaan isla eg adigoo qaadanaya dhammaan meel bannaan oo toosan. Gaar ahaan faa'iido u leh ballac siman, ama la caddeeyey, navigation.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</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
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-1canaasiiryadu waxay adeegsadaan dhammaan boosaska bannaan ee 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 dabacsanaansan ee labaad ee wata .flex-shrink-1waxa lagu qasbay inuu ku duubo waxa ku jira xariiq cusub, “soo yaraanaya” si loogu ogolaado boos badan oo shaygii hore ee dabacsanaanta 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
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 ( .mr-auto), iyo ku riixida laba shay bidix ( .ml-auto).
Nasiib darro, IE10 iyo IE11 si sax ah uma taageeraan xad-dhaafka otomaatiga ah ee alaabta dabacsan ee waalidkood leeyahay qiime aan caadi ahayn justify-content. Faahfaahin dheeraad ah ka arag jawaabta StackOverflow .
<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="mr-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="ml-auto p-2 bd-highlight">Flex item</div>
</div>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>Beddel sida walxaha dabacsan ugu duubaan weel dabacsan. Ka dooro wax duub ah haba yaraatee ( browserka default ) oo 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
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 orderloo qaato qiime kasta oo isugeyn ah (tusaale, 5), ku dar CSS caadada u ah 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-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
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! Hantidani wax saamayn ah kuma laha safafka 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