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

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 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-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

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 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-columnKallattii dhaabbataa saaguuf, ykn kallattii .flex-column-reversedhaabbataa 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-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

Wantoota qindeessuu

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

Ofii qindeessuu

Faayidaawwan align-selfwantoota 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-fillgara 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-1elementoonni 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 waliin .flex-shrink-1qabiyyee isaa gara sarara haaraatti marsuuf dirqisiifama, “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-growfi 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-contentgatii 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: autoykn 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 ordergatii 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.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