sassauƙa
Yi sauri sarrafa shimfidar wuri, daidaitawa, da girman ginshiƙan grid, kewayawa, abubuwan haɗin gwiwa, da ƙari tare da cikakkun kayan aikin flexbox masu amsawa. Don ƙarin hadaddun aiwatarwa, CSS na al'ada na iya zama dole.
Kunna halayen sassauƙa
Aiwatar displayda kayan aiki don ƙirƙirar akwati mai sassauƙa da canza abubuwan yara kai tsaye zuwa abubuwa masu sassauƙa. Kwantena masu sassauƙa da abubuwa ana iya ƙara inganta su tare da ƙarin kaddarorin sassauƙa.
<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>Akwai kuma bambance-bambancen amsawa don .d-flexda .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
Hanyar
Saita alkiblar abubuwa masu sassauƙa a cikin akwati mai sassauƙa tare da kayan aikin jagora. A mafi yawancin lokuta zaka iya barin ajin kwance anan kamar yadda tsohowar burauza ta kasance row. Koyaya, kuna iya fuskantar yanayi inda kuke buƙatar saita wannan ƙimar a sarari (kamar shimfidu masu amsawa).
Yi amfani .flex-rowda shi don saita alkiblar kwance (tsofaffin burauza), ko .flex-row-reversedon fara alkiblar kwance daga kishiyar gefe.
<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>Yi amfani .flex-columnda shi don saita alkiblar tsaye, ko .flex-column-reversedon fara alkiblar tsaye daga kishiyar gefe.
<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>Akwai kuma bambance-bambancen amsawa don 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
Tabbatar da abun ciki
Yi amfani justify-contentda kayan aiki akan kwantena flexbox don canza daidaitawar abubuwa masu sassauƙa akan babban axis (axis x don farawa, y-axis idan flex-direction: column). Zaɓi daga start(Tsoffin mai lilo), end, center, between, aroundko 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>
Akwai kuma bambance-bambancen amsawa don 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
Daidaita abubuwa
Yi amfani align-itemsda kayan aiki akan kwantena flexbox don canza daidaitawar abubuwa masu sassauƙa akan madaidaicin giciye (axis y don farawa, x-axis idan flex-direction: column). Zaɓi daga start, end, center, baseline, ko stretch( tsoho mai bincike).
<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>
Akwai kuma bambance-bambancen amsawa don 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
Daidaita kai
Yi amfani align-selfda kayan aiki akan abubuwan flexbox don canza jeri ɗaya daban-daban akan madaidaicin giciye (axis y don farawa, x-axis idan flex-direction: column). Zaɓi daga zaɓuɓɓuka iri ɗaya kamar align-items: start, end, center, baseline, ko stretch( tsoho mai bincike).
<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>
Akwai kuma bambance-bambancen amsawa don 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
Cika
Yi amfani da .flex-fillajin akan jerin abubuwan ƴan uwa don tilasta su zuwa faɗin daidai da abun ciki (ko faɗin daidai idan abun cikin su bai wuce akwatunan iyakarsu ba) yayin ɗaukar duk sararin samaniya a kwance.
<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>Akwai kuma bambance-bambancen amsawa don flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Girma da raguwa
Yi amfani .flex-grow-*da kayan aiki don jujjuya ikon abu mai sassauƙa don girma don cike sararin samaniya. A cikin misalin da ke ƙasa, .flex-grow-1abubuwan suna amfani da duk sararin sararin samaniya wanda zai iya, yayin da suke barin sauran abubuwa guda biyu masu sassaucin ra'ayi sararinsu.
<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>Yi amfani .flex-shrink-*da kayan aiki don jujjuya ikon abu mai sassauƙa don raguwa idan ya cancanta. A cikin misalin da ke ƙasa, abu na biyu mai sassauƙa tare da .flex-shrink-1an tilasta shi ya nannade abubuwan da ke ciki zuwa sabon layi, "raƙuwa" don ba da damar ƙarin sarari don abin da ya gabata tare da .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>Akwai kuma bambance-bambancen amsawa don flex-growda 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
Gefen atomatik
Flexbox na iya yin wasu kyawawan abubuwa masu ban sha'awa lokacin da kuka haɗu da daidaitawa tare da tabo ta atomatik. Ana nunawa a ƙasa akwai misalai uku na sarrafa abubuwa masu sassauƙa ta hanyar tabo ta atomatik: tsoho (babu gefe na atomatik), tura abubuwa biyu zuwa dama ( .me-auto), da tura abubuwa biyu zuwa hagu ( .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>Tare da daidaita abubuwa
A tsaye matsar da abu ɗaya mai sassauƙa zuwa sama ko ƙasan akwati ta hanyar haɗawa align-items, flex-direction: column, margin-top: autoko 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>Kunsa
Canja yadda abubuwa masu sassauƙa ke kunshe a cikin akwati mai sassauƙa. Zaɓi daga babu nannade kwata-kwata ( tsohowar burauza) tare da .flex-nowrap, nannade da .flex-wrap, ko baya nade tare da .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>
Akwai kuma bambance-bambancen amsawa don 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
Oda
Canja tsari na gani na takamaiman abubuwa masu sassauƙa tare da ɗimbin orderkayan aiki. Muna ba da zaɓuɓɓuka kawai don yin abu na farko ko na ƙarshe, da kuma sake saiti don amfani da odar DOM. Kamar yadda orderyake ɗaukar kowane ƙimar lamba daga 0 zuwa 5, ƙara CSS na al'ada don kowane ƙarin ƙimar da ake buƙata.
<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>Akwai kuma bambance-bambancen amsawa don 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
Bugu da ƙari, akwai kuma masu amsawa .order-firstda .order-lastazuzuwan waɗanda ke canza ordernau'in kashi ta amfani order: -1da order: 6, bi da bi.
.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
Daidaita abun ciki
Yi amfani align-contentda kayan aiki akan kwantena flexbox don daidaita abubuwa masu sassauƙa tare a kan giciye. Zaɓi daga start(Tsoffin mai lilo), end, center, between, aroundko stretch. Don nuna waɗannan abubuwan amfani, mun tilastawa flex-wrap: wrapkuma mun ƙara adadin sassauƙan abubuwa.
A kula! Wannan kadarar ba ta da tasiri akan layuka ɗaya na abubuwa masu sassauƙa.
<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>
Akwai kuma bambance-bambancen amsawa don 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
Abun jarida
Ana neman yin kwafin abin da ke cikin kafofin watsa labarai daga Bootstrap 4? Sake ƙirƙira shi cikin ɗan lokaci tare da ƴan sassauƙan kayan aiki waɗanda ke ba da damar ƙarin sassauci da gyare-gyare fiye da da.
<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>Kuma ka ce kana son sanya abun ciki a tsaye kusa da hoton:
<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
API ɗin Utilities
An ayyana abubuwan amfani na Flexbox a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.
"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,
),
),