Flex
Panel 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.
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.
<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>.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
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ň .
<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ň .
<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
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
<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
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
<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
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
<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
.flex-fillBar bolan gorizontal giňişligi alyp, deň giňlige mejbur etmek üçin synp elementlerini bir topar dogan elementlerinde ulanyň . Esasanam deň giňlikde ýa-da esaslandyrylan nawigasiýa üçin peýdaly.
<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>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-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.
<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.
<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
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ň.
<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-itemsBir flex elementi garyşdyryp , konteýneriň ýokarsyna ýa-da aşagyna dikligine süýşüriň flex-direction: columnwe .margin-top: automargin-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>Flex elementleriň flex gapda nähili örtülýändigini üýtgediň. Asla örtmekden (brauzeriň deslapky görnüşi) .flex-nowrap, gaplamakdan .flex-wrapýa-da tersine gaplamakdan saýlaň .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>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
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ň.
<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
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.
<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>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