Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

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

Flex abu 1
Flex abu 2
Flex abu 3
Flex abu 1
Flex abu 2
Flex abu 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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.

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

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
  • .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).

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
  • .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.

Flex abu tare da abun ciki mai yawa
Flex abu
Flex abu
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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.

Flex abu
Flex abu
Abu na uku sassauƙa
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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.

Flex abu
Flex abu
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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).

Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
Flex abu
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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
  • .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.

Abu na farko mai sassauƙa
Abu mai sassauƙa na biyu
Abu na uku sassauƙa
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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.

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-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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .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.

Placeholder Image
Wannan wasu abun ciki ne daga bangaren watsa labarai. Kuna iya maye gurbin wannan tare da kowane abun ciki kuma daidaita shi yadda ake buƙata.
html
<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:

Placeholder Image
Wannan wasu abun ciki ne daga bangaren watsa labarai. Kuna iya maye gurbin wannan tare da kowane abun ciki kuma daidaita shi yadda ake buƙata.
html
<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
    ),
    "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,
      ),
    ),