Flex
Ātri pārvaldiet režģa kolonnu izkārtojumu, izlīdzināšanu un izmēru noteikšanu, navigāciju, komponentus un daudz ko citu, izmantojot pilnu adaptīvo flexbox utilītu komplektu. Sarežģītākām ieviešanām var būt nepieciešams pielāgots CSS.
Iespējot elastīgu uzvedību
Lietojiet displayutilītas, lai izveidotu flexbox konteineru un pārveidotu tiešos bērnu elementus elastīgos priekšmetos. Flex konteinerus un priekšmetus var vēl vairāk pārveidot ar papildu elastīgām īpašībām.
<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>Adaptīvās variācijas pastāv arī .d-flexun .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
Virziens
Iestatiet elastīgo priekšmetu virzienu elastīgā konteinerā ar virziena utilītiem. Vairumā gadījumu jūs varat izlaist horizontālo klasi, jo pārlūkprogrammas noklusējuma iestatījums ir row. Tomēr var rasties situācijas, kad šī vērtība ir skaidri jāiestata (piemēram, adaptīvi izkārtojumi).
Izmantojiet .flex-row, lai iestatītu horizontālo virzienu (pārlūka noklusējuma iestatījums) vai .flex-row-reversesāktu horizontālo virzienu no pretējās puses.
<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>Izmantojiet .flex-column, lai iestatītu vertikālo virzienu vai .flex-column-reversesāktu vertikālo virzienu no pretējās puses.
<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>Adaptīvās variācijas pastāv arī 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
Pamatojiet saturu
Izmantojiet justify-contentutilītprogrammas flexbox konteineros, lai mainītu elastīgo vienumu izlīdzināšanu uz galvenās ass (sākt ar x ass, ja y ass flex-direction: column). Izvēlieties no start(pārlūka noklusējuma), end, center, between, around, vai 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>
Adaptīvās variācijas pastāv arī 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
Izlīdziniet vienumus
Izmantojiet align-itemsutilītprogrammas flexbox konteineros, lai mainītu elastīgo vienumu izlīdzināšanu uz šķērsass (sākumam ar y ass, ja flex-direction: column) ass. Izvēlieties no start, end, center, baseline, vai stretch(pārlūka noklusējuma iestatījumi).
<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>
Adaptīvās variācijas pastāv arī 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
Saskaņot sevi
Izmantojiet align-selfutilītprogrammas flexbox vienumiem, lai individuāli mainītu to izlīdzināšanu uz šķērsass (sākt ar y ass, ja flex-direction: column) ass. Izvēlieties kādu no tām pašām opcijām kā align-items: start, end, center, baseline, vai stretch(pārlūka noklusējuma iestatījumi).
<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>
Adaptīvās variācijas pastāv arī 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
Aizpildiet
Izmantojiet .flex-fillklasi virknei brāļu elementu, lai piespiestu tos platumos, kas vienādi ar to saturu (vai vienādos platumos, ja to saturs nepārsniedz to apmales lodziņus), vienlaikus aizņemot visu pieejamo horizontālo vietu.
<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>Adaptīvās variācijas pastāv arī flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Augt un sarukt
Izmantojiet .flex-grow-*utilītprogrammas, lai pārslēgtu elastīga vienuma spēju augt, lai aizpildītu pieejamo vietu. Tālāk esošajā piemērā .flex-grow-1elementi izmanto visu pieejamo vietu, vienlaikus nodrošinot atlikušajiem diviem elastīgajiem elementiem nepieciešamo vietu.
<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>Izmantojiet .flex-shrink-*utilītprogrammas, lai vajadzības gadījumā pārslēgtu elastīga vienuma spēju samazināties. Tālāk esošajā piemērā otrais elastīgais vienums ar .flex-shrink-1ir spiests ietīt tā saturu uz jaunu rindiņu, “sarukt”, lai būtu vairāk vietas iepriekšējam elastīgajam vienumam 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>Adaptīvās variācijas pastāv arī flex-growun 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
Automātiskās piemales
Flexbox var paveikt dažas satriecošas lietas, ja sajaucat elastīgo līdzinājumu ar automātiskajām piemalēm. Tālāk ir parādīti trīs piemēri elastīgu vienumu vadīšanai, izmantojot automātiskās piemales: noklusējuma (bez automātiskās piemales), divu vienumu bīdīšana pa labi ( .me-auto) un divu vienumu bīdīšana pa kreisi ( .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>Ar izlīdzināšanas vienumiem
Vertikāli pārvietojiet vienu elastīgu vienumu konteinera augšpusē vai apakšā, sajaucot align-items, flex-direction: columnun margin-top: autovai 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>Aptinums
Mainiet elastīgo priekšmetu iesaiņošanas veidu elastīgā konteinerā. Izvēlieties iesaiņošanu bez vispār (pārlūkprogrammas noklusējuma iestatījums) ar .flex-nowrap, iesaiņošanu ar .flex-wrapvai apgriezto ietīšanu ar .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>
Adaptīvās variācijas pastāv arī 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
Pasūtiet
Mainiet noteiktu elastīgo vienumu vizuālo secību, izmantojot dažas orderutilītas. Mēs piedāvājam tikai opcijas, lai preci izveidotu pirmo vai pēdējo, kā arī atiestatīšanu, lai izmantotu DOM pasūtījumu. Tā kā orderjebkura vesela skaitļa vērtība ir no 0 līdz 5, pievienojiet pielāgotu CSS, lai iegūtu visas nepieciešamās papildu vērtības.
<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>Adaptīvās variācijas pastāv arī 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
Turklāt ir arī adaptīvās .order-firstun .order-lastklases, kas maina orderelementa vērtību, attiecīgi piemērojot order: -1un 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
Saskaņot saturu
Izmantojiet align-contentutilītprogrammas flexbox konteineros, lai saskaņotu elastīgos vienumus kopā uz šķērsass. Izvēlieties no start(pārlūka noklusējuma), end, center, between, around, vai stretch. Lai demonstrētu šīs utilītas, esam ieviesuši flex-wrap: wrapun palielinājuši elastīgo vienumu skaitu.
Uzmanību! Šis īpašums neietekmē atsevišķas elastīgu vienumu rindas.
<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>
Adaptīvās variācijas pastāv arī 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
Mediju objekts
Vai vēlaties replicēt multivides objekta komponentu no Bootstrap 4? Ātri izveidojiet to ar dažām elastīgām utilītprogrammām, kas nodrošina vēl lielāku elastību un pielāgošanu nekā iepriekš.
<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>Un sakiet, ka vēlaties vertikāli centrēt saturu blakus attēlam:
<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 utilītas ir deklarētas mūsu utilītu API scss/_utilities.scss. Uzziniet, kā izmantot utilītu 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,
),
),