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.
Amaloota flex dandeessisi
display
Qabduu 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 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Jijjiiramni deebii kennuu .d-flex
fi .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
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-reverse
kallattii qajeelaa gama faallaa irraa jalqabuuf.
<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>
.flex-column
Kallattii dhaabbataa saaguuf, ykn kallattii .flex-column-reverse
dhaabbataa gama faallaa irraa jalqabuuf fayyadami.
<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>
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
Qabiyyee qajeelchuu
Faayidaa justify-content
qabduu 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
Wantoota qindeessuu
Faayidaa align-items
qabduu 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
Ofii qindeessuu
Faayidaawwan align-self
wantoota flexbox irratti fayyadamii 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
Guutuu
Gitaa tarree qaamolee obbolaa irratti fayyadamii .flex-fill
gara bal'ina qabiyyee isaanii wajjin walqixa ta'etti dirqisiisuuf (ykn bal'ina walqixaa yoo qabiyyeen isaanii daangaa-sanduuqa isaanii hin caalle) yeroo iddoo qajeelaa jiru hunda fudhadhu.
<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>
Jijjiiramni deebii kennuunis flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Guddachuu fi xiqqaachuu
.flex-grow-*
Dandeettii wanta flex guddinaa bakka jiru guutuuf jijjiiruuf faayidaa fayyadami . Fakkeenya armaan gadii keessatti, .flex-grow-1
elementoonni iddoo jiru hunda kan danda'u fayyadamu, yeroo ta'u wantoota flex lamaan hafan iddoo barbaachisaa isaanii hayyamu.
<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>
.flex-shrink-*
Dandeettii wanta flex yoo barbaachisaa ta'e xiqqaachuu jijjiiruuf faayidaa fayyadami . Fakkeenya armaan gadii keessatti, wanti flex inni lammaffaan with .flex-shrink-1
qabiyyee isaa gara sarara haaraatti akka marsuuf dirqame, “xiqqeessuu” wanta flex duraan jiruuf bakka dabalataa hayyamuuf .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>
Jijjiiramni deebii kennuu flex-grow
fi 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
Marginoota ofumaan
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-content
gatii durtii hin taane qaban irratti auto margins sirnaan hin deeggaran. Bal'ina isaaf deebii StackOverflow kana ilaali .
<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>
Align-items waliin
Wanti flex tokko gara gubbaa ykn jala qabduu tokkootti align-items
, flex-direction: column
, fi margin-top: auto
ykn walitti makuun dhaabbataadhaan sochoosi margin-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>
Itti maruu
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
Ajajuu
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 order
gatii lakkoofsa guutuu kamiyyuu fudhatu (fkn, 5
), gatiiwwan dabalataa barbaachisan kamiifuu CSS amala dabali.
<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>
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
Qabiyyee qindeessuu
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.start
end
center
between
around
stretch
flex-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-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