Source

Okugooma

Dukanya mangu ensengeka, okulaganya, n'obunene bw'ennyiriri za grid, okutambulira, ebitundu, n'ebirala n'ekibinja ekijjuvu eky'ebikozesebwa bya flexbox ebiddamu. Ku nkola ezisingako obuzibu, CSS eya bulijjo eyinza okwetaagisa.

Ssobozesa enneeyisa za flex

Kozesa displayebikozesebwa okukola ekintu kya flexbox n’okukyusa elementi z’abaana obutereevu mu bintu ebikyukakyuka. Ebintu ebiteekebwamu ebiwujjo n’ebintu bisobola okwongera okukyusibwamu nga biriko eby’obugagga ebirala ebifuumuuka.

Nze ndi konteyina ya flexbox!
<div class="d-flex p-2">I'm a flexbox container!</div>
Ndi ekintu ekiyitibwa inline flexbox container!
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Enjawulo eziddamu nazo ziriwo ku .d-flexne .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

Endagiriro

Teeka obulagirizi bw’ebintu ebifuumuuka mu kibya ekifuumuuka nga kiriko ebikozesebwa mu bulagirizi. Mu mbeera ezisinga osobola okulekawo ekibiina eky'okwebungulula wano nga browser default eri row. Naye, oyinza okusanga embeera nga weetaaga okuteekawo mu bulambulukufu omuwendo guno (nga ensengeka eziddamu).

Kozesa .flex-rowokuteekawo obulagirizi obw’okwebungulula (obulagirizi bwa bbulawuzi obusookerwako), oba .flex-row-reverseokutandika obulagirizi obw’okwebungulula okuva ku ludda olulala.

Flex ekintu 1
Flex ekintu 2
Flex ekintu 3
Flex ekintu 1
Flex ekintu 2
Flex ekintu 3
<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>

Kozesa .flex-columnokuteekawo obulagirizi obwesimbye, oba .flex-column-reverseokutandika obulagirizi obwesimbye okuva ku ludda olulala.

Flex ekintu 1
Flex ekintu 2
Flex ekintu 3
Flex ekintu 1
Flex ekintu 2
Flex ekintu 3
<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>

Enjawulo eziddamu nazo ziriwo ku 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

Obutuufu bw’ebirimu

Kozesa justify-contentebikozesebwa ku flexbox containers okukyusa alignment y'ebintu flex ku main axis (x-axis okutandika, y-axis singa flex-direction: column). Londa okuva mu start(browser default), end, center, between, oba around.

Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<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>

Enjawulo eziddamu nazo ziriwo ku 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

Laganya ebintu

Kozesa align-itemsebikozesebwa ku flexbox containers okukyusa alignment y'ebintu flex ku cross axis (y-axis okutandika, x-axis singa flex-direction: column). Londa okuva mu start, end, center, baseline, oba stretch(browser default).

Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<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>

Enjawulo eziddamu nazo ziriwo ku 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

Align self

Kozesa align-selfebikozesebwa ku bintu bya flexbox okukyusa kinnoomu okukwatagana kwabyo ku cross axis (y-axis okutandika, x-axis singa flex-direction: column). Londa okuva mu nkola ze zimu nga align-items: start, end, center, baseline, oba stretch(browser default).

Ekintu ekiyitibwa Flex
Ekintu ekifuumuuka ekikwatagana
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekifuumuuka ekikwatagana
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekifuumuuka ekikwatagana
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekifuumuuka ekikwatagana
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekifuumuuka ekikwatagana
Ekintu ekiyitibwa Flex
<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>

Enjawulo eziddamu nazo ziriwo ku 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

Ebitundu by’emmotoka

Flexbox esobola okukola ebintu ebirabika obulungi nga otabula flex alignments ne auto margins. Wansi biragiddwa ebyokulabirako bisatu eby’okufuga ebintu ebikyukakyuka nga oyita mu auto margins: default (no auto margin), okusika ebintu bibiri ku ddyo ( .mr-auto), n’okusika ebintu bibiri ku kkono ( .ml-auto).

Ebyembi, IE10 ne IE11 teziwagira bulungi auto margins ku bintu flex nga omuzadde wabyo alina omuwendo ogutali gwa bulijjo justify-content. Laba eky'okuddamu kino ekya StackOverflow okumanya ebisingawo.

Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<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>

Nga tulina align-items

Tambuza ekintu kimu ekigonvu waggulu oba wansi mu kibya mu vertikal ng'otabula align-items, flex-direction: column, ne margin-top: autooba margin-bottom: auto.

Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<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>

Okuzinga

Kyusa engeri ebintu ebigonvu gye bizingiramu mu kibya ekifuumuuka. Londa okuva mu tewali kuzinga n'akatono (okuzinga kwa bbulawuzi) ne .flex-nowrap, okuzinga ne .flex-wrap, oba okuzinga okudda emabega ne .flex-wrap-reverse.

Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex flex-wrap">
  ...
</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Enjawulo eziddamu nazo ziriwo ku 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

Okulagira

Kyusa ensengeka y’okulaba ey’ebintu ebitongole ebikyukakyuka n’ebikozesebwa ebitonotono order. Tuwa eby'okulonda byokka eby'okukola ekintu ekisooka oba ekisembayo, wamu n'okuddamu okuteekawo okukozesa ekiragiro kya DOM. Nga bwe orderkitwala omuwendo gwonna ogwa namba enzijuvu (okugeza, 5), yongera ku CSS eya bulijjo ku miwendo gyonna egy'enjawulo egyetaagisa.

Ekintu ekisooka okufukamira
Ekintu ekyokubiri ekifuumuuka
Ekintu eky’okusatu ekiyitibwa flex
<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>

Enjawulo eziddamu nazo ziriwo ku 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

Laganya ebirimu

Kozesa align-contentebikozesebwa ku flexbox containers okulaganya ebintu flex wamu ku cross axis. Londa okuva mu start(browser default), end, center, between, around, oba stretch. Okulaga ebikozesebwa bino, twassa mu nkola flex-wrap: wrapera ne twongera ku muwendo gw’ebintu ebikyukakyuka.

Emitwe waggulu! Eky'obugagga kino tekirina kye kikola ku nnyiriri emu ez'ebintu ebigonvu.

Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
Ekintu ekiyitibwa Flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

Enjawulo eziddamu nazo ziriwo ku 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