in English

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.

Bu sahypada

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

html

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

Men içerki flexbox konteýner!

html

<div class="d-inline-flex p-2">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
.d-xxl-flex
.d-xxl-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

html

<div class="d-flex flex-row mb-3">
  <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>

.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

html

<div class="d-flex flex-column mb-3">
  <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>

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
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-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) ,,,, ýa end- centerda saýlaň .betweenaroundevenly

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>
<div class="d-flex justify-content-evenly">...</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-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

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
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-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
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-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

html

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
.flex-xxl-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

html

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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 mazmunyny kiçeldip, täze setir bilen örtmäge mejbur bolýar .w-100.

Flex element

html

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
.flex-xxl-{grow|shrink}-0
.flex-xxl-{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 ( .me-auto) we iki zady çepe ( .ms-auto).

Flex element

html

<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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

html

<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-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. order0-dan 5-e çenli bitewi bitewi bahany alşy ýaly , zerur bolan goşmaça bahalar üçin ýörite CSS goşuň.

Ilkinji flex element

Ikinji flex element

Üçünji flex element

html

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

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

Mundan başga-da , degişlilikde elementiň üýtgemegini üýtgedýän täsirli .order-firstwe .order-lastsynplar bar .orderorder: -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

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-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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Mediýa obýekti

Media obýekt komponentini Bootstrap 4-den köpeltmek isleýärsiňizmi? Öňkülerden has çeýe we özleşdirmäge mümkinçilik berýän birnäçe çeýe kömekçi enjamlar bilen hiç wagt dörediň.

Bu media komponentinden käbir mazmun. Muny islendik mazmun bilen çalşyp, zerur bolanda düzedip bilersiňiz.

html

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

Mazmuny şekiliň gapdalynda dikligine goýmak isleýärsiňiz:

Bu media komponentinden käbir mazmun. Muny islendik mazmun bilen çalşyp, zerur bolanda düzedip bilersiňiz.

html

<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

Flexbox kömekçi enjamlary API-de yglan edilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.

    "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
    ),
    "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,
      ),
    ),