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.
<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.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ň .
<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.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
<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
<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
<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ň .
<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.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.
<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 mazmunyny kiçeldip, täze setir 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.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).
<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="me-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="ms-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
<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.
<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.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ň.
<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-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.
<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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.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ň.
<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:
<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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),