Source

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.

Ni akwati flexbox ne!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Ni babban akwati flexbox ne na layi!
<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.

Flex abu 1
Flex abu 2
Flex abu 3
Flex abu 1
Flex abu 2
Flex abu 3
<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.

Flex abu 1
Flex abu 2
Flex abu 3
Flex abu 1
Flex abu 2
Flex abu 3
<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.

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<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).

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<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).

Flex abu
Daidaitaccen abu mai sassauƙa
Flex abu
Flex abu
Daidaitaccen abu mai sassauƙa
Flex abu
Flex abu
Daidaitaccen abu mai sassauƙa
Flex abu
Flex abu
Daidaitaccen abu mai sassauƙa
Flex abu
Flex abu
Daidaitaccen abu mai sassauƙa
Flex abu
<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 daidaici yayin ɗaukar duk sararin samaniya a kwance. Musamman mai amfani ga daidai-nisa, ko barata, kewayawa.

Flex abu
Flex abu
Flex abu
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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.

Flex abu
Flex abu
Abu na uku sassauƙa
<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 masa ya nannade abinda ke ciki zuwa sabon layi, “yana raguwa” don ba da damar ƙarin sarari don abin da ya gabata tare da .w-100.

Flex abu
Flex abu
<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. 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 ( .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.

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<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.

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<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.

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex flex-nowrap">
  ...
</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex flex-wrap">
  ...
</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<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.

Abu na farko mai sassauƙa
Abu mai sassauƙa na biyu
Abu na uku sassauƙa
<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.

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex align-content-end flex-wrap">...</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex align-content-center flex-wrap">...</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex align-content-between flex-wrap">...</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<div class="d-flex align-content-around flex-wrap">...</div>
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
<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