Source

Flex

Tor sütünleriniň ýerleşişini, deňleşdirilmegini we ululygyny çalt dolandyryň, nawigasiýa, komponentler we ş.m. jogap beriji flexbox enjamlarynyň doly toplumy bilen. Has çylşyrymly durmuşa geçirmek üçin ýörite CSS zerur bolup biler.

Çeýe hereketleri işjeňleşdiriň

displayFlexbox konteýner döretmek we göni çaga elementlerini flex elementlere öwürmek üçin kömekçi enjamlary ulanyň . Flex gaplar we zatlar goşmaça flex häsiýetleri bilen hasam üýtgedilip bilner.

Men flexbox konteýner!

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

Men içerki flexbox konteýner!

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

.d-flexJogapkärçilikli üýtgeýişler hem bar .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

Ectionol

Flex elementleriň ugruny kömekçi enjamlar bilen flex konteýnerde düzüň. Köplenç brauzeriň deslapky bolşy ýaly bu ýerde keseligine synpy goýup bilersiňiz row. Şeýle-de bolsa, bu bahany aç-açan kesgitlemek zerur bolan ýagdaýlara duçar bolup bilersiňiz (täsirli düzülişler ýaly).

.flex-rowGorizontal ugry bellemek üçin (brauzeriň deslapky görnüşi) ýa-da .flex-row-reversekeseligine ters tarapa başlamak üçin ulanyň .

Flex element 1

Flex element 2

Flex element 3

Flex element 1

Flex element 2

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

.flex-columnWertikal ugry kesgitlemek ýa-da .flex-column-reverseters tarapdan dik ugry başlamak üçin ulanyň .

Flex element 1

Flex element 2

Flex element 3

Flex element 1

Flex element 2

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

Jogapkärçilikli üýtgeýişler hem bar 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

Mazmuny esaslandyryň

justify-contentEsasy okdaky flex elementleriň deňleşmesini üýtgetmek üçin flexbox konteýnerlerinde kömekçi enjamlary ulanyň (başlamak üçin x-ok, eger-de ok bolsa flex-direction: column). start(Brauzer deslapky) ,,, endýa - centerda saýlaň .betweenaround

Flex element

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

Jogapkärçilikli üýtgeýişler hem bar 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

Harytlary deňleşdiriň

Flexbox konteýnerlerindäki kömekçi enjamlary haç okundaky flex elementleriň deňleşmesini üýtgetmek üçin ulanyň align-items(başlamak üçin y oky, eger-de ok bolsa flex-direction: column). start,,, ora-da end( centerbrauzeriň deslapky görnüşi) saýlaň .baselinestretch

Flex element

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

Jogapkärçilikli üýtgeýişler hem bar 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

Özüňi deňleşdir

Flexbox elementlerindäki kömekçi enjamlary haç okundaky deňleşmesini aýratynlykda üýtgetmek üçin ulanyň align-self(başlamak üçin y oky, eger-de ok bolsa flex-direction: column). align-items: ,,,, ora-da start( endbrauzeriň deslapky görnüşi) centerýaly opsiýalardan saýlaň .baselinestretch

Flex element

Flex elementi deňleşdirildi

Flex element

Flex elementi deňleşdirildi

Flex element

Flex elementi deňleşdirildi

Flex element

Flex elementi deňleşdirildi

Flex element

Flex elementi deňleşdirildi

Flex element

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

Jogapkärçilikli üýtgeýişler hem bar 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

Doldur

.flex-fillBar bolan gorizontal giňişligi alanyňyzda, mazmunyna deň bolan giňliklere (ýa-da mazmuny serhet gutularyndan geçmese deň giňliklere) mejbur etmek üçin synp elementlerini ulanyň .

Köp mazmunly çeýe element

Flex element

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

Jogapkärçilikli üýtgeýişler hem bar flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

Ösüň we kiçeliň

.flex-grow-*Elýeterli ýerleri doldurmak üçin çeýe elementiň ösmek ukybyny üýtgetmek üçin kömekçi enjamlary ulanyň . Aşakdaky mysalda, .flex-grow-1elementler galan iki flex elemente zerur ýer bermäge mümkinçilik bermek bilen, mümkin bolan ähli ýerleri ulanýarlar.

Flex element

Üçünji flex element

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

.flex-shrink-*Zerur bolsa flex elementiň kiçelmek ukybyny üýtgetmek üçin kömekçi enjamlary ulanyň . Aşakdaky mysalda, ikinji flex elementi .flex-shrink-1, öňki flex elementi bilen has köp ýer açmak üçin “kiçelip” täze mazmuny bilen örtmäge mejbur bolýar .w-100.

Flex element

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

flex-growJogapkärçilikli üýtgeýişler hem bar 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

Awtoulag gyralary

Flexbox awtomatik gyralary bilen garyşdyranyňyzda gaty ajaýyp zatlar edip biler. Aşakda görkezilen, flex marşrutlary awto marjlar arkaly dolandyrmagyň üç mysaly: default (awto margin ýok), iki zady saga ( .mr-auto) we iki zady çepe ( .ml-auto).

Gynansagam, IE10 we IE11, ene-atasynyň asyl gymmaty bolmadyk flex elementlerdäki awto-marjlary dogry goldamaýarlar justify-content. Has giňişleýin maglumat üçin bu StackOverflow jogabyna serediň.

Flex element

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

Düzediş elementleri bilen

align-itemsBir flex elementi garyşdyryp , konteýneriň ýokarsyna ýa-da aşagyna dikligine flex-direction: columnwe .margin-top: automargin-bottom: auto

Flex element

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

Gaplaň

Flex elementleriň flex gapda nähili örtülýändigini üýtgediň. Hiç hili örtügi (brauzeriň deslapky görnüşi) bilen .flex-nowrap, gaplamak .flex-wrapýa-da tersine gaplamak bilen saýlaň .flex-wrap-reverse.

Flex element

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

Flex element

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

Flex element

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

Jogapkärçilikli üýtgeýişler hem bar 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

Sargyt

Birnäçe peýdaly enjamlar bilen aýratyn flex elementleriň wizual tertibini üýtgediň order. Diňe bir elementi ilki ýa-da iň soňky etmek, şeýle hem DOM tertibini ulanmak üçin täzeden düzmek üçin mümkinçilikler berýäris. Islendik orderbitewi bahany (meselem, 5) alşy ýaly, zerur bolan goşmaça bahalar üçin ýörite CSS goşuň.

Ilkinji flex element

Ikinji flex element

Üçünji flex element

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

Jogapkärçilikli üýtgeýişler hem bar 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

Mazmuny deňleşdiriň

align-contentFlexbox konteýnerlerindäki kömekçi enjamlary haç okunda birleşdirmek üçin ulanyň . start(Brauzer deslapky) ,,,, ýa end- centerda saýlaň . Bu hyzmatlary görkezmek üçin , flex elementleriniň sanyny ýerine ýetirdik we köpeltdik.betweenaroundstretchflex-wrap: wrap

Başlar! Bu häsiýet flex hatarlaryň bir hataryna täsir etmeýär.

Flex element

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

Flex element

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

Flex element

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

Flex element

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

Flex element

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

Flex element

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

Jogapkärçilikli üýtgeýişler hem bar 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