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
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
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, ko around.
<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>
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-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
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
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
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
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 sararin samaniya 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
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. An nuna 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 ( .mr-auto), da tura abubuwa biyu zuwa hagu ( .ml-auto).
Abin takaici, IE10 da IE11 ba sa goyan bayan fage ta atomatik akan abubuwa masu sassauƙa waɗanda iyayensu ke da justify-contentƙimar da ba ta asali ba. Dubi wannan amsar StackOverflow don ƙarin cikakkun bayanai.
<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="mr-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="ml-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
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 (misali, 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-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
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-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