Përkul

Aktivizo sjelljet përkulëse

Aplikoni displayshërbimet për të krijuar një kontejnerë flexbox dhe për të transformuar elementët e drejtpërdrejtë të fëmijëve në artikuj fleksibël. Kontejnerët dhe artikujt Flex mund të modifikohen më tej me veti shtesë fleksibël.

<div class="d-flex p-2">I'm a flexbox container!</div>

<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Variacionet e përgjegjshme ekzistojnë gjithashtu për .d-flexdhe .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

Drejtimi

Vendosni drejtimin e artikujve të përkulur në një enë përkulëse me programet e drejtimit. Në shumicën e rasteve ju mund të hiqni klasën horizontale këtu pasi parazgjedhja e shfletuesit është row. Megjithatë, mund të hasni situata ku ju është dashur të vendosni në mënyrë eksplicite këtë vlerë (si paraqitjet e përgjegjshme).

Përdoreni .flex-rowpër të vendosur një drejtim horizontal (parazgjedhja e shfletuesit) ose .flex-row-reversepër të nisur drejtimin horizontal nga ana e kundërt.

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

Përdoreni .flex-columnpër të vendosur një drejtim vertikal ose .flex-column-reversepër të nisur drejtimin vertikal nga ana e kundërt.

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

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Arsyetoni përmbajtjen

Përdorni justify-contentprogramet ndihmëse në kontejnerët flexbox për të ndryshuar shtrirjen e artikujve flex në boshtin kryesor (boshti x në fillim, boshti y nëse flex-direction: column). Zgjidhni nga start(parazgjedhja e shfletuesit), end, center, between, aroundose 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>

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Rreshtoni artikujt

Përdorni align-itemsprogramet ndihmëse në kontejnerët flexbox për të ndryshuar shtrirjen e artikujve flex në boshtin kryq (boshti y në fillim, boshti x nëse flex-direction: column). Zgjidhni nga start, end, center, baselineose stretch(parazgjedhja e shfletuesit).

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

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Rreshtoni veten

Përdorni align-selfprogramet ndihmëse në artikujt flexbox për të ndryshuar individualisht shtrirjen e tyre në boshtin kryq (boshti y për fillim, boshti x nëse flex-direction: column). Zgjidhni nga të njëjtat opsione si align-items: start, end, center, baseline, ose stretch(parazgjedhja e shfletuesit).

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

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Plotësoni

Përdorni .flex-fillklasën në një seri elementësh si motra për t'i detyruar ato në gjerësi të barabarta me përmbajtjen e tyre (ose gjerësi të barabarta nëse përmbajtja e tyre nuk i kalon kutitë e tyre kufitare) duke zënë të gjithë hapësirën horizontale të disponueshme.

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

Variacione të përgjegjshme ekzistojnë gjithashtu për flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

Rriteni dhe tkurret

Përdorni .flex-grow-*programet ndihmëse për të ndryshuar aftësinë e një artikulli fleksibël për t'u rritur për të mbushur hapësirën e disponueshme. Në shembullin e mëposhtëm, .flex-grow-1elementët përdorin të gjithë hapësirën e disponueshme që munden, duke u lejuar dy artikujve të mbetur të përkulur hapësirën e tyre të nevojshme.

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

Përdorni .flex-shrink-*programet ndihmëse për të ndryshuar aftësinë e një artikulli flex për t'u tkurrur nëse është e nevojshme. Në shembullin e mëposhtëm, artikulli i dytë fleksibël me .flex-shrink-1është i detyruar të mbështjellë përmbajtjen e tij në një rresht të ri, duke "tkurrur" për të lejuar më shumë hapësirë ​​për artikullin e mëparshëm flex me .w-100.

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Variacionet e përgjegjshme ekzistojnë gjithashtu për flex-growdhe 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

Margjinat automatike

Flexbox mund të bëjë disa gjëra mjaft të mrekullueshme kur përzieni rreshtimet e përkuljes me kufijtë automatikë. Më poshtë tregohen tre shembuj të kontrollit të artikujve fleksibël nëpërmjet marzheve automatike: parazgjedhja (pa diferencë automatike), shtyrja e dy artikujve në të djathtë ( .me-auto) dhe shtyrja e dy artikujve në të majtë ( .ms-auto).

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

Me align-arts

Lëvizni vertikalisht një artikull të përkulur në krye ose në fund të një ene duke përzier align-items, flex-direction: column, dhe margin-top: autoose margin-bottom: auto.

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

Mbështillni

Ndryshoni mënyrën e mbështjelljes së artikujve të përkulur në një enë përkulëse. Zgjidhni nga pa mbështjellje fare (parazgjedhja e shfletuesit) me .flex-nowrap, mbështjellje me .flex-wrap, ose mbështjellje e kundërt me .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>

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Rendit

Ndryshoni rendin vizual të artikujve specifikë fleksibël me një pjesë të vogël të ordershërbimeve. Ne ofrojmë vetëm opsione për të bërë një artikull të parë ose të fundit, si dhe një rivendosje për të përdorur porosinë DOM. Siç ordermerr çdo vlerë numër të plotë nga 0 në 5, shtoni CSS të personalizuar për çdo vlerë shtesë të nevojshme.

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

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Përveç kësaj, ka edhe klasa të përgjegjshme .order-firstdhe të cilat ndryshojnë elementin duke aplikuar dhe përkatësisht ..order-lastorderorder: -1order: 6

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

Përshtat përmbajtjen

Përdorni align-contentprogramet ndihmëse në kontejnerët flexbox për të lidhur artikujt flex së bashku në boshtin kryq. Zgjidhni nga start(parazgjedhja e shfletuesit), end, center, between, aroundose stretch. Për të demonstruar këto shërbime, ne kemi zbatuar flex-wrap: wrapdhe rritur numrin e artikujve fleksibël.

Kokat lart! Kjo veçori nuk ka efekt në rreshtat e vetme të artikujve fleksibël.

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

Variacione të përgjegjshme ekzistojnë gjithashtu për 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

Objekti mediatik

Po kërkoni të kopjoni komponentin e objektit mediatik nga Bootstrap 4? Rikrijojeni atë në asnjë kohë me disa shërbime fleksibile që lejojnë edhe më shumë fleksibilitet dhe personalizim se më parë.

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

Dhe thoni që dëshironi të përqendroni vertikalisht përmbajtjen pranë imazhit:

<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

Utilities API

Shërbimet e Flexbox janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.

    "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,
      ),
    ),