in English

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.

Ez konteynirek flexbox im!

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

Ez konteynerek flexbox a hundurîn im!

<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

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.

Xala Flex 1

Xala Flex 2

Xala Flex 3

Xala Flex 1

Xala Flex 2

Xala Flex 3

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

Xala Flex 1

Xala Flex 2

Xala Flex 3

Xala Flex 1

Xala Flex 2

Xala Flex 3

<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

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, an around.

Babetê Flex

<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 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û).

Babetê Flex

<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

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.

Babetê Flex

Tiştek flex a lihevhatî

Babetê Flex

Tiştek flex a lihevhatî

Babetê Flex

Tiştek flex a lihevhatî

Babetê Flex

Tiştek flex a lihevhatî

Babetê Flex

Tiştek flex a lihevhatî

Babetê Flex

<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

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.

Tiştek Flex bi gelek naverok

Babetê Flex

<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

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.

Babetê Flex

Tişta sêyem flex

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

Babetê Flex

<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

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ê ( .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.

Babetê Flex

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

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.

Babetê Flex

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

Babetê Flex

<div class="d-flex flex-nowrap">
  ...
</div>

Babetê Flex

<div class="d-flex flex-wrap">
  ...
</div>

Babetê Flex

<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

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 nirxek yekjimar digire (mînak, 5), CSS-ya xwerû ji bo nirxên pêvek hewce zêde bike.

Yekem xala flex

Babetê flex duyemîn

Tişta sêyem flex

<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

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.

Babetê Flex

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Babetê Flex

<div class="d-flex align-content-end flex-wrap">...</div>

Babetê Flex

<div class="d-flex align-content-center flex-wrap">...</div>

Babetê Flex

<div class="d-flex align-content-between flex-wrap">...</div>

Babetê Flex

<div class="d-flex align-content-around flex-wrap">...</div>

Babetê Flex

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