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.
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">I'm a flexbox container!</div><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
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">
<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ň .
<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>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
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">
<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>align-itemsBir flex elementi garyşdyryp , konteýneriň ýokarsyna ýa-da aşagyna dikligine flex-direction: columnwe .margin-top: automargin-bottom: auto
<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>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.
<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">
<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-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