Source

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.

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 konteynerek flexbox im!

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

Ez konteynerek flexbox a hundurîn im!

<div class="d-inline-flex p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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-yê ku dest pê dike, ger-xemberê flex-direction: column). Hilbijêre ji start, end, center, baseline, an stretch(gerokê 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

align-selfKarûbarên li ser hêmanên flexbox bikar bînin da ku bi rengek kesane hevrêziya wan li ser xaça xaçê biguhezînin (tengava y ya ku dest pê dike, x-teşe heke flex-direction: column). Ji heman vebijarkan hilbijêrin align-items: start, end, center, baseline, an jî stretch(geroka gerokê).

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

Margins 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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

Bi align-tiştan

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" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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-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