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.
Aplikoni displayshërbimet për të krijuar një kontejnerë flexbox dhe transformoni 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>Ndryshimet 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
Caktoni drejtimin e artikujve fleksibël në një enë fleksibël me programet e drejtimit. Në shumicën e rasteve, këtu mund të hiqni klasën horizontale pasi parazgjedhja e shfletuesit është row. Megjithatë, mund të hasni situata kur 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
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
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
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
Përdorni .flex-fillklasën në një seri elementësh si vëllezër për t'i detyruar ato në gjerësi të barabarta duke zënë të gjithë hapësirën horizontale të disponueshme. Veçanërisht i dobishëm për lundrim me gjerësi të barabartë ose të justifikuar.
<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>Variacione të përgjegjshme ekzistojnë gjithashtu për flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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 më poshtë, artikulli i dytë fleksibël me .flex-shrink-1të detyrohet të mbështjellë përmbajtjen e tij në një linjë të re, "tkurrje" 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>Ndryshimet 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
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 kufijtë e automjeteve në artikujt fleksibël, prindi i të cilit ka një justify-contentvlerë jo të paracaktuar. Shikoni 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>Lëvizni vertikalisht një artikull fleksibël 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>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
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ë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-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