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.
<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>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.d-xxl-flex.d-xxl-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.
<div class="d-flex flex-row mb-3">
<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.
<div class="d-flex flex-column mb-3">
<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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-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, around, oba evenly.
<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>
<div class="d-flex justify-content-evenly">...</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-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-xxl-start.justify-content-xxl-end.justify-content-xxl-center.justify-content-xxl-between.justify-content-xxl-around.justify-content-xxl-evenly
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).
<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-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-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).
<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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Okujjuza
Kozesa .flex-fillekibiina ku lunyiriri lw’ebintu eby’oluganda okubikaka mu bugazi obwenkana n’ebirimu byabwe (oba obugazi obwenkanankana singa ebirimu byabwe tebisukka border-boxes zaabwe) nga otwala ekifo kyonna ekiriwo eky’okwebungulula.
<div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div>Enjawulo eziddamu nazo ziriwo ku flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Kula era okendeeze
Kozesa .flex-grow-*ebikozesebwa okukyusakyusa obusobozi bw’ekintu ekigonvu okukula okujjuza ekifo ekiriwo. Mu kyokulabirako wansi, .flex-grow-1elementi zikozesa ekifo kyonna ekiriwo kye zisobola, ate nga zikkiriza ebintu ebibiri ebisigadde ebifuumuuka ekifo kyabyo ekyetaagisa.
<div class="d-flex">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Third flex item</div>
</div>Kozesa .flex-shrink-*ebikozesebwa okukyusakyusa obusobozi bw’ekintu ekigonvu okukendeera bwe kiba kyetaagisa. Mu kyokulabirako wansi, ekintu ekyokubiri ekifuumuuka ne .flex-shrink-1kiwalirizibwa okuzinga ebirimu ku layini empya, “okukendeera” okusobozesa ekifo ekisingawo ku kintu ekifuumuuka ekyasooka nga kiriko .w-100.
<div class="d-flex">
<div class="p-2 w-100">Flex item</div>
<div class="p-2 flex-shrink-1">Flex item</div>
</div>Enjawulo eziddamu nazo ziriwo ku flex-growne 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.flex-xxl-{grow|shrink}-0.flex-xxl-{grow|shrink}-1
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 ( .me-auto), n’okusika ebintu bibiri ku kkono ( .ms-auto).
<div class="d-flex mb-3">
<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 mb-3">
<div class="me-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 mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-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.
<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Okulagira
Kyusa ensengeka y’okulaba ey’ebintu ebitongole ebikyukakyuka n’ebikozesebwa ebitonotono order. Tuwa eby'okulonda byokka eby'okukola ekintu okusooka oba okusembayo, wamu n'okuddamu okuteekawo okukozesa ekiragiro kya DOM. Nga bwe orderkitwala omuwendo gwonna ogwa namba enzijuvu okuva ku 0 okutuuka ku 5, yongera ku CSS eya bulijjo ku miwendo gyonna egy'enjawulo egyetaagisa.
<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-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
Okugatta ku ekyo waliwo ne responsive .order-firstne .order-lastclasses ezikyusa the orderof an element nga zikozesa order: -1ne order: 6, respectively.
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
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 gigulumivu! Eky'obugagga kino tekirina kye kikola ku nnyiriri emu ez'ebintu ebigonvu.
<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>
Enjawulo eziddamu nazo ziriwo ku 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-between.align-content-xxl-around.align-content-xxl-stretch
Ekintu ky’emikutu gy’amawulire
Onoonya okukoppa ekitundu ky'ekintu ky'emikutu okuva mu Bootstrap 4? Ddamu okugikola mu kaseera katono n’ebikozesebwa ebitonotono ebisobozesa okukyukakyuka n’okulongoosa okusinga bwe kyali edda.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Era gamba nti oyagala okuteeka ebirimu wakati mu vertikal okumpi n’ekifaananyi:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>Sass nga bwe kiri
Ebikozesebwa API
Ebikozesebwa bya Flexbox birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),