Flex
Greitai valdykite tinklelio stulpelių išdėstymą, išlygiavimą ir dydį, naršymą, komponentus ir dar daugiau naudodami visą reaguojančių „flexbox“ paslaugų rinkinį. Sudėtingesniems diegimams gali prireikti pasirinktinio CSS.
Įgalinkite lankstų elgesį
Taikykite displaypriemones, kad sukurtumėte lanksčią dėžutę ir tiesioginius vaikų elementus paverstumėte lanksčiais elementais. Lanksčiuosius konteinerius ir daiktus galima toliau modifikuoti naudojant papildomas lankstumo savybes.
<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>Taip pat yra .d-flexir .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
Kryptis
Nustatykite lanksčių elementų kryptį lanksčiame konteineryje su krypties programomis. Daugeliu atvejų čia galite praleisti horizontalią klasę, nes naršyklės numatytoji reikšmė yra row. Tačiau galite susidurti su situacijomis, kai reikėjo aiškiai nustatyti šią reikšmę (pvz., interaktyvūs išdėstymai).
Naudokite .flex-rownorėdami nustatyti horizontalią kryptį (naršyklės numatytoji nuostata) arba .flex-row-reversepradėti horizontalią kryptį iš priešingos pusės.
<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>Naudokite .flex-columnnorėdami nustatyti vertikalią kryptį arba .flex-column-reversepradėti vertikalią kryptį iš priešingos pusės.
<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>Taip pat yra reaguojančių variantų 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
Pagrįskite turinį
Naudokite justify-content„flexbox“ konteinerių paslaugų programas, kad pakeistumėte lanksčių elementų lygiavimą pagrindinėje ašyje (pradėti x ašimi, y ašimi, jei flex-direction: column). Pasirinkite iš start(naršyklės numatytoji programa), end, center, between, around, arba evenly.
<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>
Taip pat yra reaguojančių variantų 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
Sulygiuokite elementus
Naudokite align-items„flexbox“ konteinerių paslaugų programas, kad pakeistumėte lanksčių elementų išlygiavimą skersinėje ašyje (pradėti y ašimi, jei flex-direction: column) – x ašimi. Pasirinkite iš start, end, center, baseline, arba stretch(naršyklės numatytoji dalis).
<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>
Taip pat yra reaguojančių variantų 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
Sulygink save
Naudokite align-self„flexbox“ elementų paslaugų programas, kad individualiai pakeistumėte jų lygiavimą skersinėje ašyje (pradėti y ašimi, jei flex-direction: column) – x ašimi. Pasirinkite iš tų pačių parinkčių kaip align-items: start, end, center, baseline, arba stretch(naršyklės numatytoji nuostata).
<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>
Taip pat yra reaguojančių variantų 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
Užpildykite
Naudokite .flex-fillklasę seserų elementų serijoje, kad priverstumėte juos į plotį, lygų jų turiniui (arba vienodo pločio, jei jų turinys neviršija jų kraštinių laukelių), tuo pačiu užimdami visą turimą horizontalią erdvę.
<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>Taip pat yra reaguojančių variantų flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Augti ir mažėti
Naudokite .flex-grow-*komunalines programas, kad perjungtumėte lankstaus elemento gebėjimą augti, kad užpildytumėte laisvą vietą. Toliau pateiktame pavyzdyje .flex-grow-1elementai išnaudoja visą turimą erdvę, o likusiems dviem lankstiems elementams paliekama reikiama erdvė.
<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>Jei reikia, naudokite .flex-shrink-*komunalines programas, kad perjungtumėte lankstaus elemento galimybę susitraukti. Toliau pateiktame pavyzdyje antrasis lankstus elementas su .flex-shrink-1yra priverstas apvynioti jo turinį į naują eilutę, „susitraukiant“, kad būtų daugiau vietos ankstesniam lanksčiam elementui su .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>Taip pat yra flex-growir 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
Automatinės paraštės
„Flexbox“ gali padaryti keletą nuostabių dalykų, kai sumaišote lanksčią išlygiavimą su automatinėmis paraštėmis. Toliau pateikiami trys lanksčių elementų valdymo automatinėmis paraštėmis pavyzdžiai: numatytasis (be automatinių paraščių), dviejų elementų stūmimas į dešinę ( .me-auto) ir dviejų elementų stūmimas į kairę ( .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>Su lygiavimo elementais
Vertikaliai perkelkite vieną lanksčią elementą į konteinerio viršų arba apačią, maišydami align-items, flex-direction: columnir margin-top: autoarba margin-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>Apvyniokite
Pakeiskite lanksčių daiktų įvyniojimą į lanksčią talpyklą. Pasirinkite iš viso nevyniojimo (naršyklės numatytasis nustatymas) naudodami .flex-nowrap, apvyniojimą su .flex-wraparba atvirkštinį vyniojimą su .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>
Taip pat yra reaguojančių variantų 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
Įsakymas
Pakeiskite vaizdinę konkrečių lanksčių elementų tvarką naudodami keletą orderpaslaugų. Teikiame tik parinktis, kaip padaryti prekę pirmą arba paskutinę, taip pat iš naujo nustatyti DOM užsakymą. Jei orderreikia bet kokios sveikojo skaičiaus reikšmės nuo 0 iki 5, pridėkite tinkintą CSS, jei reikia papildomų verčių.
<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>Taip pat yra reaguojančių variantų 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
Be to, taip pat yra interaktyvių .order-firstir .order-lastklasių, kurios keičia orderelemento dydį atitinkamai taikydami order: -1ir order: 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
Suderinkite turinį
Naudokite align-content„flexbox“ konteinerių komunalines priemones, kad sulygiuotumėte lankstus elementus skersine ašimi. Pasirinkite iš start(naršyklės numatytoji programa), end, center, between, around, arba stretch. Siekdami parodyti šias paslaugas, pritaikėme flex-wrap: wrapir padidinome lanksčių elementų skaičių.
Galvas aukštyn! Ši savybė neturi įtakos atskiroms lanksčių elementų eilutėms.
<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>
Taip pat yra reaguojančių variantų 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
Žiniasklaidos objektas
Norite pakartoti medijos objekto komponentą iš „Bootstrap 4“? Atkurkite jį akimirksniu naudodami keletą lanksčių paslaugų, kurios suteikia dar daugiau lankstumo ir pritaikymo nei anksčiau.
<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>Ir tarkime, kad norite vertikaliai centruoti turinį šalia vaizdo:
<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“ komunalinės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų API.
"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,
),
),