Flex
Bi komek tam a karûbarên flexbox-ê yên bersivdar re zû vesazkirin, 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.
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
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
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, an 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>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-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
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(gerokê 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
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
.flex-fillDersê li ser rêzek hêmanên xwişk-bira bikar bînin da ku dema ku hemî cîhê horizontî yê berdest digirin wan bi darê zorê bixin nav firehiyên wekhev. Bi taybetî ji bo navîgasyonek wekhev-fireh, an rastdar, bikêr e.
<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>Guhertoyên bersivdar jî ji bo hene flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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 nermalav bişkînin. Di mînaka li jêr de, madeya fleksê ya 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
Flexbox dikare hin tiştên pir bi heybet bike gava ku hûn rêzikên nerm û marjînalên otomatîkî 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ê ( .mr-auto), û xistina du tiştan ber bi çepê ( .ml-auto).
Mixabin, IE10 û IE11 bi rêkûpêk marjînalên otomatîkî yên li ser hêmanên nerm ên ku dêûbavê wan justify-contentnirxek ne-pêşniyazkirî ye piştgirî nakin. Ji bo bêtir agahdarî vê bersiva StackOverflow bibînin.
<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>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>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
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 nirxek yekjimar digire (mînak, 5), CSS-ya xwerû ji bo nirxên pêvek hewce 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-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
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