Daddabuu
Saffisaan qindaa'ina, qindaa'ina, fi safara tarjaawwan tarjaa, qajeelcha, qaamolee, fi kkf faayidaalee flexbox deebii kennuu danda'an guutuudhaan bulchi. Hojiirra oolmaa walxaxaa ta'eef, CSS amala barbaachisaa ta'uu danda'a.
displayQabduu flexbox uumuu fi elementoota ijoollee kallatti gara wanta flex jijjiiruuf faayidaa hojii irra oolchi . Qabduu fi meeshaaleen flex amaloota flex dabalataatiin caalaatti fooyya'uu danda'u.
<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>Jijjiiramni deebii kennuu .d-flexfi .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
Kallattii wantoota flex qabduu flex fayyadamtoota kallattii waliin saagi. Yeroo baay'ee gita qajeelaa asitti dhiisuu dandeessa sababiin isaas durtii biraawzari row. Haa ta'u malee, haalawwan gatii kana ifatti saaguu barbaadde (akka qindaa'inoota deebii kennuu) si mudachuu danda'a.
Kallattii qajeelaa saaguuf fayyadami .flex-row(durtii biraawzari), ykn .flex-row-reversekallattii qajeelaa gama faallaa irraa jalqabuuf.
<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>.flex-columnKallattii dhaabbataa saaguuf, ykn kallattii .flex-column-reversedhaabbataa gama faallaa irraa jalqabuuf fayyadami.
<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>Jijjiiramni deebii kennuunis 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
Faayidaa justify-contentqabduu flexbox irratti fayyadamii qindaa'ina wantoota flex siiqqe guddaa irratti jijjiiruuf (x-axis jalqabuuf, y-axis yoo flex-direction: column). start(durtii biraawzarii), end, center, between, ykn irraa filadhu 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>Jijjiiramni deebii kennuunis 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
Faayidaa align-itemsqabduu flexbox irratti fayyadamii qindaa'ina wantoota flex siiqqe qaxxaamuraa irratti jijjiiruuf (siqqeewwan y jalqabuuf, siiqqe x yoo flex-direction: column). start, end, center, baseline, ykn stretch(durtii biraawzarii) irraa fili .
<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>Jijjiiramni deebii kennuunis 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
Faayidaawwan align-selfwantoota flexbox irratti fayyadami dhuunfaan qindaa'ina isaanii siiqqe qaxxaamuraa irratti jijjiiruuf (siqqeewwan y jalqabuuf, siiqqe x yoo flex-direction: column). Filannoowwan walfakkaatan keessaa filadhu align-items: start, end, center, baseline, ykn stretch(durtii biraawzari).
<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>Jijjiiramni deebii kennuunis 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 yeroo flex alignments auto margins wajjin wal makatu wantoota baay'ee ajaa'ibsiisoo tokko tokko hojjechuu danda'a. Armaan gaditti kan agarsiifaman fakkeenyota sadii wantoota flex karaa auto margins to'achuudha: durtii (auto margin hin qabu), wanta lama gara mirgaatti dhiibuu ( .mr-auto), fi wanta lama gara bitaatti dhiibuu ( .ml-auto).
Kan nama dhibu, IE10 fi IE11 wantoota flex warra isaanii justify-contentgatii durtii hin taane qaban irratti auto margins sirnaan hin deeggaran. Bal'ina isaaf deebii StackOverflow kana ilaali .
<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>Wanti flex tokko gara gubbaa ykn jala qabduu tokkootti align-items, flex-direction: column, fi margin-top: autoykn walitti makuun dhaabbataadhaan sochoosi margin-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>Akkaataa wantootni flex qabduu flex keessatti marfaman jijjiiri. Tasumaa marfamuu hin qabu (durtii biraawzari) .flex-nowrap, waliin marfamuu .flex-wrap, ykn marfamuu duubatti deebisuu keessaa filadhu .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>Jijjiiramni deebii kennuunis 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
Tartiiba mul'ataa wantoota flex murtaa'oo faayilii muraasaan jijjiiri order. Filannoowwan wanta tokko jalqaba ykn dhumaa hojjechuuf qofa kennina, akkasumas ajaja DOM fayyadamuuf deebisanii dhaabuu. Akkuma ordergatii lakkoofsa guutuu kamiyyuu fudhatu (fkn, 5), gatiiwwan dabalataa barbaachisan kamiifuu CSS amala dabali.
<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>Jijjiiramni deebii kennuunis 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
Wantoota flex siiqqe qaxxaamuraa irratti walittialign-content hiriirsuuf faayidaa qabduu flexbox irratti fayyadami. (durtii biraawzarii), , , , , ykn irraa filadhu . Faayidaa kana agarsiisuuf, meeshaalee flex dirqisiifnee daballeerra.startendcenterbetweenaroundstretchflex-wrap: wrap
Mataa ol qaba! Amalli kun tarreewwan tokkicha wanta flex irratti dhiibbaa hin qabu.
<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>Jijjiiramni deebii kennuunis 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