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 display
ibikoresho kugirango ukore kontineri ya flexbox hanyuma uhindure abana bayobora ibintu byoroshye. Ibikoresho bya flex nibintu birashobora guhindurwa kure 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-flex
na .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-row
gushiraho icyerekezo gitambitse (mushakisha isanzwe), cyangwa .flex-row-reverse
gutangira 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-column
gushiraho icyerekezo gihagaritse, cyangwa .flex-column-reverse
gutangira 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-content
ibikorwa byingirakamaro kuri flexbox kugirango uhindure guhuza ibintu bya flex kumurongo nyamukuru (x-axis yo gutangira, y-axis niba flex-direction: column
). Hitamo kuva ( mushakisha start
isanzwe ) ,,,,, cyangwa end
.center
between
around
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>
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-items
ibikoresho kuri kontineri ya flexbox kugirango uhindure guhuza ibintu bya flex kumurongo wambukiranya (y-axis yo gutangira, x-axis niba flex-direction: column
). Hitamo kuva ,,,, start
cyangwa ( Mucukumbuzi isanzwe end
) center
.baseline
stretch
<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-self
ibikorwa byingenzi kuri flexbox kugirango uhindure kugiti cyawe guhuza umurongo wambukiranya (y-axis yo gutangira, x-axis niba flex-direction: column
). Hitamo mumahitamo amwe nka : ,,,, align-items
cyangwa start
( mushakisha isanzwe).end
center
baseline
stretch
<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-fill
urwego 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-1
ibice 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-1
nuguhatirwa 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-grow
na 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: column
na, margin-top: auto
cyangwa 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 order
zingirakamaro. Dutanga gusa amahitamo yo gukora ikintu mbere cyangwa cyanyuma, kimwe no gusubiramo kugirango ukoreshe gahunda ya DOM. Nkuko order
bifata agaciro kamwe kose 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-first
byamasomo .order-last
bihindura ihinduka order
ryikintu ukoresheje order: -1
kandi 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-content
ibikorwa byingenzi kuri kontineri ya flexbox kugirango uhuze ibintu bya flex hamwe kumurongo wambukiranya. Hitamo kuva ( mushakisha start
isanzwe ) ,,,,, cyangwa end
. Kugirango tugaragaze ibikorwa byingirakamaro, twashyize mubikorwa kandi twongera umubare wibintu bya flex.center
between
around
stretch
flex-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 muri scss/_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,
),
),