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">I'm a flexbox container!</div><div class="d-inline-flex p-2">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">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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
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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">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" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">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 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">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">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! 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