Përkul

Menaxhoni me shpejtësi paraqitjen, shtrirjen dhe madhësinë e kolonave të rrjetit, navigimit, komponentëve dhe më shumë me një grup të plotë shërbimesh reaguese flexbox. Për implementime më komplekse, CSS e personalizuar mund të jetë e nevojshme.

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 bd-highlight">I'm a flexbox container!</div>

<div class="d-inline-flex p-2 bd-highlight">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

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

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

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

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

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

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

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

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

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

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-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 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>

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

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

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ë ( .mr-auto) dhe shtyrja e dy artikujve në të majtë ( .ml-auto).

Fatkeqësisht, IE10 dhe IE11 nuk mbështesin siç duhet marzhet automatike në artikujt flex, prindi i të cilëve ka një justify-contentvlerë jo të parazgjedhur. Shihni këtë përgjigje StackOverflow për më shumë detaje.

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

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

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

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ë (p.sh., 5), shtoni CSS të personalizuar për çdo vlerë shtesë të nevojshme.

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

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

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