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 waxyaabo dabacsanaan 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
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-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 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, 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
Isku hagaaji walxaha
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
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
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
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-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 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
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 ( .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>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 ( 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
Dalbo
Beddel habka 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
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-between.align-content-around.align-content-stretch.align-content-sm-start.align-content-sm-end.align-content-sm-center.align-content-sm-between.align-content-sm-around.align-content-sm-stretch.align-content-md-start.align-content-md-end.align-content-md-center.align-content-md-between.align-content-md-around.align-content-md-stretch.align-content-lg-start.align-content-lg-end.align-content-lg-center.align-content-lg-between.align-content-lg-around.align-content-lg-stretch.align-content-xl-start.align-content-xl-end.align-content-xl-center.align-content-xl-between.align-content-xl-around.align-content-xl-stretch