Imiterere
Gucunga byihuse imiterere, guhuza, hamwe nubunini bwa grid inkingi, kugendagenda, ibice, nibindi byinshi hamwe na suite yuzuye ya flexbox yingirakamaro. Kubindi bikorwa bigoye, CSS yihariye irashobora kuba nkenerwa.
Gushoboza imyitwarire yoroheje
Koresha displayibikoresho kugirango ukore kontineri ya flexbox hanyuma uhindure abana bayobora mubintu byoroshye. Ibikoresho bya flex nibintu birashobora guhindurwa kurushaho hamwe nibindi byongeweho.
<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>Guhindura ibisubizo nabyo birahari kuri .d-flexna .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
Icyerekezo
Shiraho icyerekezo cyibintu bya flex mubikoresho bya flex hamwe nicyerekezo cyingirakamaro. Mubihe byinshi ushobora gusiba urwego rutambitse hano nkuko mushakisha isanzwe ari row. Ariko, urashobora guhura nibihe ukeneye gushiraho neza agaciro (nkuburyo busubiza).
Koresha .flex-rowgushiraho icyerekezo gitambitse (mushakisha isanzwe), cyangwa .flex-row-reversegutangira icyerekezo gitambitse uhereye kuruhande.
<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>Koresha .flex-columngushiraho icyerekezo gihagaritse, cyangwa .flex-column-reversegutangira icyerekezo gihagaritse uhereye kuruhande.
<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>Guhindura ibisubizo nabyo birahari kuri 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
Emeza ibirimo
Koresha justify-contentibikorwa byingirakamaro kuri flexbox kugirango uhindure guhuza ibintu bya flex kumurongo nyamukuru (x-axis yo gutangira, y-axis niba flex-direction: column). Hitamo kuva ( mushakisha startisanzwe ) ,,,,, cyangwa end.centerbetweenaroundevenly
<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>
Guhindura ibisubizo nabyo birahari kuri 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
Huza ibintu
Koresha align-itemsibikorwa byingenzi kuri kontineri ya flexbox kugirango uhindure guhuza ibintu bya flex kumurongo wambukiranya (y-axis yo gutangira, x-axis niba flex-direction: column). Hitamo kuva ,,,, startcyangwa ( Mucukumbuzi isanzwe end) center.baselinestretch
<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>
Guhindura ibisubizo nabyo birahari kuri 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
Ihuze wenyine
Koresha align-selfibikorwa byingirakamaro kuri flexbox kugirango uhindure kugiti cyawe guhuza umurongo wambukiranya (y-axis yo gutangira, x-axis niba flex-direction: column). Hitamo mumahitamo amwe nka : ,,,, align-itemscyangwa start( Mucukumbuzi isanzwe).endcenterbaselinestretch
<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>
Guhindura ibisubizo nabyo birahari kuri 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
Uzuza
Koresha .flex-fillurwego kurukurikirane rwibintu bavukana kugirango ubahatire mubugari bungana nibirimo (cyangwa ubugari bungana niba ibirimo bitarenze imipaka-agasanduku) mugihe ufata umwanya wose utambitse.
<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>Guhindura ibisubizo nabyo birahari kuri flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Gukura no kugabanuka
Koresha .flex-grow-*ibikorwa kugirango uhindure ibintu bya flex ubushobozi bwo gukura kugirango wuzuze umwanya uhari. Murugero rukurikira, .flex-grow-1ibice bikoresha umwanya wose uboneka birashobora, mugihe wemereye ibintu bibiri bya flex bisigaye umwanya wabo ukenewe.
<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>Koresha .flex-shrink-*ibikoresho kugirango uhindure ibintu bya flex ubushobozi bwo kugabanuka nibiba ngombwa. Murugero rukurikira, ikintu cya kabiri cya flex hamwe .flex-shrink-1nuguhatirwa kuzinga ibirimo kumurongo mushya, "kugabanuka" kugirango yemere umwanya munini kubintu byabanjirije flex hamwe na .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>Guhindura ibisubizo nabyo birahari kuri flex-growna 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
Imodoka
Flexbox irashobora gukora ibintu byiza cyane mugihe uvanze guhuza flex hamwe na auto margins. Herekanwa hepfo ni ingero eshatu zo kugenzura ibintu bya flex ukoresheje amamodoka yimodoka: isanzwe (nta modoka yimodoka), gusunika ibintu bibiri iburyo ( .me-auto), no gusunika ibintu bibiri ibumoso ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Guhuza-ibintu
Hindura rwose ikintu kimwe cya flex hejuru cyangwa hepfo yikintu uvanze align-items, flex-direction: columnna, margin-top: autocyangwa 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>Gupfunyika
Hindura uburyo ibintu bya flex bipfunyika mubintu byoroshye. Hitamo kuva nta gupfunyika na gato (mushakisha isanzwe) hamwe .flex-nowrap, gupfunyika .flex-wrap, cyangwa gupfunyika hamwe .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>
Guhindura ibisubizo nabyo birahari kuri 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
Tegeka
Hindura gahunda igaragara yibintu bya flex yihariye hamwe nintoki orderzingirakamaro. Dutanga gusa amahitamo yo gukora ikintu mbere cyangwa cyanyuma, kimwe no gusubiramo kugirango ukoreshe gahunda ya DOM. Nkuko orderbifata agaciro kamwe kuva 0 kugeza 5, ongeramo CSS yihariye kubintu byose byongeweho bikenewe.
<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>Guhindura ibisubizo nabyo birahari kuri 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
Byongeye kandi, hariho kandi ibisubizo .order-firstbyamasomo .order-lastbihindura ihinduka orderryikintu ukoresheje order: -1kandi order: 6, kimwe.
.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
Huza ibirimo
Koresha align-contentibikorwa byingenzi kuri kontineri ya flexbox kugirango uhuze ibintu bya flex hamwe kumurongo wambukiranya. Hitamo kuva ( mushakisha startisanzwe ) ,,,,, cyangwa end. Kugirango tugaragaze ibikorwa byingirakamaro, twashyize mubikorwa kandi twongera umubare wibintu bya flex.centerbetweenaroundstretchflex-wrap: wrap
Umutwe! Uyu mutungo nta ngaruka ufite kumurongo umwe wibintu bya flex.
<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>
Guhindura ibisubizo nabyo birahari kuri 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Ikintu cyitangazamakuru
Urashaka kwigana ibikoresho byitangazamakuru kuva muri Bootstrap 4? Kurema mugihe gito hamwe na flex zingirakamaro zemerera ndetse guhinduka no kwihindura kuruta mbere.
<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>Kandi vuga ko ushaka guhuza ibice bikikije ishusho:
<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
Ibikorwa API
Ibikorwa bya Flexbox byatangajwe mubikorwa byacu API muriscss/_utilities.scss . Wige gukoresha ibikoresho API.
"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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),