Flex
Bi komek tam a karûbarên flexbox-ê yên bersivdar re zû birêkûpêk, rêzkirin, û mezinbûna stûnên torê, navîgasyon, pêkhate û hêj bêtir birêve bibin. Ji bo pêkanînên tevlihevtir, dibe ku CSS-ya xwerû hewce be.
Tevgerên nerm çalak bikin
Karûbaran bicîh bînin da ku konteynirek flexbox displaybiafirînin û hêmanên zarokan ên rasterast veguherînin tiştên nerm . Konteynir û hêmanên Flex dikarin bi taybetmendiyên pêvek ên pêvek bêtir werin guheztin.
<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>Guhertoyên bersivdar jî ji bo .d-flexû .d-inline-flexhene.
.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
Ber
Arasteya hêmanên flex bi karûbarên rêwerzê ve di konteynirek nerm de bicîh bikin. Di pir rewşan de hûn dikarin li vir çîna horizontî derxin ji ber ku geroka xwerû ye row. Lêbelê, hûn dikarin bi rewşên ku hûn hewce ne ku hûn vê nirxê bi eşkere destnîşan bikin (mîna sêwiranên bersivdar) re rû bi rû bimînin.
Ji .flex-rowbo danîna rêgezek horizontî (pêşniyara gerokê) bikar bînin, an jî .flex-row-reverseji hêla berevajî ve rêça horizontal dest pê bikin.
<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>Ji .flex-columnbo danîna rêgezek vertîkal bikar bînin, an jî .flex-column-reverseji hêla dijber ve rêça vertîkal dest pê bikin.
<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>Guhertoyên bersivdar jî ji bo hene 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
Naveroka rastdar bikin
justify-contentKarûbarên li ser konteynerên flexbox bikar bînin da ku lihevhatina hêmanên flex ên li ser eksê sereke biguhezînin (xebata x-a ku dest pê dike, y-tevger heke flex-direction: column). Hilbijêre ji start(geroka xwerû), end, center, between, around, an 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>
Guhertoyên bersivdar jî ji bo hene 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
Align tomar
align-itemsKarûbarên li ser konteynerên flexbox bikar bînin da ku lihevhatina hêmanên flex ên li ser xaçê biguhezînin (texna y ya ku dest pê dike, x-teşe heke flex-direction: column). Hilbijêre ji start, end, center, baseline, an stretch(geroka xwerû).
<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>
Guhertoyên bersivdar jî ji bo hene 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
Xwe li hev bikin
Karûbarên li ser hêmanên flexbox bikar bînin align-selfda ku bi rengek kesane lihevhatina wan li ser xaçê biguherînin (texna y ya ku dest pê dike, x-teşe heke flex-direction: column). Ji heman vebijarkên wekî align-items: start, end, center, baseline, an stretch(geroka gerokê) hilbijêrin.
<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>
Guhertoyên bersivdar jî ji bo hene 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
Tijîkirin
Dersê li ser rêzek hêmanên xwişk-bira bikar bînin .flex-fillda ku wan bi darê zorê bidin ber firehiyên ku bi naveroka wan re wekhev in (an firehiyên wekhev heke naveroka wan ji qutiyên sînorê wan derbas nebe) dema ku hemî cîhê horizontî yê berdest digire.
<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>Guhertoyên bersivdar jî ji bo hene flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Mezin dibin û biçûk dibin
Karûbaran bikar bînin .flex-grow-*da ku kapasîteya hêmanek nerm a mezinbûnê biguhezînin da ku cîhê berdest tijî bikin. Di mînaka jêrîn de, .flex-grow-1hêman hemî cîhê berdest ên ku dikarin bikar tînin, di heman demê de rê dide du tiştên mayî cîhê xweya pêwîst.
<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>Karûbaran bikar bînin .flex-shrink-*da ku heke hewce bike kapasîteya hilberek nermî ya piçûktir bike. Di mînaka li jêr de, madeya flex a duyemîn bi .flex-shrink-1neçarî ye ku naveroka xwe bi xêzek nû ve girêbide, "biçûk bibe" da ku cîhê zêde ji bo tiştê berê yê flex bi .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>Guhertoyên bersivdar jî ji bo flex-growû flex-shrinkhene.
.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
Margin Auto
Flexbox dikare hin tiştên pir bi heybet bike gava ku hûn hevrêziyên nerm bi marjînalên otomatîkî re tevlihev bikin. Li jêr sê mînakên kontrolkirina hêmanên nerm bi rêgezên otomatîkî ve têne xuyang kirin: xwerû (bê marjîna otomatîk), xistina du tiştan ber bi rastê ( .me-auto), û xistina du tiştan ber bi çepê ( .ms-auto).
<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="me-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="ms-auto p-2 bd-highlight">Flex item</div>
</div>Bi align-tişt
align-itemsBi tevlêkirina , flex-direction: column, û margin-top: autoan , yek hêmanek flex ber bi jor an binê konteynirekê ve biherikînin 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>Pêçan
Biguhezînin ka tiştên nerm çawa di konteynirek nerm de dipêçin. Hilbijêre ji qet pêçandî ne (wek geroka gerokê) bi .flex-nowrap, pêça bi .flex-wrap, an pêça berevajî bi .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>
Guhertoyên bersivdar jî ji bo hene 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
Emir
Rêza dîtbarî ya hêmanên nerm ên taybetî bi çend amûran orderbiguhezînin. Em tenê vebijarkan ji bo çêkirina tiştek yekem an paşîn, û her weha ji nû ve vebijarkek ji bo karanîna fermana DOM peyda dikin. Ji ber orderku ji 0 heta 5 nirxek yekjimar digire, ji bo her nirxek din hewce bike CSS-ya xwerû lê zêde bike.
<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>Guhertoyên bersivdar jî ji bo hene 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
Wekî din, di heman demê de bersivdar .order-firstû .order-lastçînên ku bi rêzdarî bi sepandin û , orderelementek diguhezînin jî hene.order: -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
Naveroka hev bikin
align-contentKarûbarên li ser konteynirên flexbox bikar bînin da ku tiştên flex bi hev re li ser axa xaçê rêz bikin. Hilbijêre ji start(geroka xwerû), end, center, between, around, an stretch. flex-wrap: wrapJi bo ku van karûbaran nîşan bidin, me hejmara hêmanên nerm ferz kiriye û zêde kiriye.
Serê xwe! Vê taybetmendiyê ti bandorek li ser rêzikên yekane yên hêmanên nerm nake.
<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>
Guhertoyên bersivdar jî ji bo hene 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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Objekt Media
Digerin ku hêmana hêmana medyayê ji Bootstrap 4 dubare bikin? Wê di demek zû de bi çend karûbarên nermî yên ku ji berê hê bêtir nermbûn û xwerûkirinê dihêlin ji nû ve biafirînin.
<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>Û bêje ku hûn dixwazin naverokê li kêleka wêneyê naverok bikin:
<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
Karûbarên Flexbox di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.
"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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),