Flex
Stjórnaðu fljótt skipulagi, röðun og stærð ristardálka, siglinga, íhluta og fleira með fullri föruneyti af móttækilegum flexbox tólum. Fyrir flóknari útfærslur gæti sérsniðið CSS verið nauðsynlegt.
Virkjaðu sveigjanlega hegðun
Notaðu displaytól til að búa til flexbox-ílát og umbreyttu beinum börnum í flex-hluti. Hægt er að breyta sveigjanlegum ílátum og hlutum frekar með viðbótar sveigjanlegum eiginleikum.
<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>Móttækileg afbrigði eru einnig til fyrir .d-flexog .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
Stefna
Stilltu stefnu sveigjanlegra hluta í sveigjanlegu íláti með stefnubúnaði. Í flestum tilfellum geturðu sleppt láréttum flokki hér þar sem sjálfgefið vafra er row. Hins vegar gætirðu lent í aðstæðum þar sem þú þurftir að stilla þetta gildi sérstaklega (eins og móttækileg skipulag).
Notaðu .flex-rowtil að stilla lárétta stefnu (sjálfgefið vafra), eða .flex-row-reversetil að hefja lárétta stefnu frá gagnstæðri hlið.
<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>Notaðu .flex-columntil að stilla lóðrétta stefnu eða .flex-column-reversetil að hefja lóðrétta stefnu frá gagnstæðri hlið.
<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>Móttækileg afbrigði eru einnig til fyrir 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
Rökstyðjið innihald
Notaðu justify-contenttól á flexbox-ílátum til að breyta röðun sveigjanlegra hluta á aðalásnum (x-ás til að byrja, y-ás ef flex-direction: column). Veldu úr start(sjálfgefið vafra), end, center, between, around, eða 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>
Móttækileg afbrigði eru einnig til fyrir 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
Samræma hluti
Notaðu align-itemstól á flexbox-ílátum til að breyta röðun sveigjanlegra hluta á þverásnum (y-ás til að byrja, x-ás ef flex-direction: column). Veldu úr start, end, center, baseline, eða stretch(sjálfgefið vafra).
<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>
Móttækileg afbrigði eru einnig til fyrir 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
Samræma sjálfan sig
Notaðu align-selftól á flexbox-hlutum til að breyta röðun þeirra á þverásnum hver fyrir sig (y-ásinn til að byrja, x-ásinn ef flex-direction: column). Veldu úr sömu valmöguleikum og align-items: start, end, center, baseline, eða stretch(sjálfgefið vafra).
<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>
Móttækileg afbrigði eru einnig til fyrir 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
Fylla
Notaðu .flex-fillbekkinn á röð systkinaþátta til að þvinga þá í breidd sem er jafn breidd og innihald þeirra (eða jafn breidd ef innihald þeirra fer ekki yfir rammakassa þeirra) á meðan þú tekur allt tiltækt lárétt pláss.
<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>Móttækileg afbrigði eru einnig til fyrir flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Vaxa og minnka
Notaðu .flex-grow-*tól til að skipta um getu sveigjanlegra hluta til að vaxa til að fylla laus pláss. Í dæminu hér að neðan nota .flex-grow-1þættirnir allt tiltækt pláss sem þeir geta, en leyfa hinum tveimur sveigjanlegu hlutunum sem eftir eru nauðsynlega plássið.
<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>Notaðu .flex-shrink-*tól til að skipta um getu sveigjanlegra hluta til að minnka ef þörf krefur. .flex-shrink-1Í dæminu hér að neðan neyðist annar sveigjanlegur hlutur með til að vefja innihald sitt í nýja línu, "minnkar" til að leyfa meira pláss fyrir fyrri sveigjanlega hlutinn með .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>Móttækileg afbrigði eru einnig til fyrir flex-growog 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
Sjálfvirk spássía
Flexbox getur gert ansi ógnvekjandi hluti þegar þú blandar sveigjanlegu línum saman við sjálfvirka spássíu. Sýnd hér að neðan eru þrjú dæmi um að stjórna sveigjanlegum hlutum með sjálfvirkum spássíur: sjálfgefið (engin sjálfvirk spássía), ýta tveimur atriðum til hægri ( .me-auto) og ýta tveimur atriðum til vinstri ( .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>Með align-atriðum
Færðu einn sveigjanlegan hlut lóðrétt efst eða neðst á ílát með því að blanda align-items, flex-direction: column, og margin-top: autoeða 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>Vefja
Breyttu því hvernig sveigjanlegir hlutir pakka inn í sveigjanlega ílát. Veldu á milli alls engin umbúðir (sjálfgefið vafra) með .flex-nowrap, umbúðir með .flex-wrapeða öfugri umbúðir með .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>
Móttækileg afbrigði eru einnig til fyrir 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
Panta
Breyttu sjónrænni röð tiltekinna sveigjanlegra hluta með handfylli af ordertólum. Við bjóðum aðeins upp á valkosti til að gera hlut fyrst eða síðast, svo og endurstillingu til að nota DOM pöntunina. Eins og ordertekur hvaða heiltölugildi sem er frá 0 til 5 skaltu bæta við sérsniðnum CSS fyrir öll viðbótargildi sem þarf.
<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>Móttækileg afbrigði eru einnig til fyrir 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
Að auki eru einnig móttækilegir .order-firstog .order-lastflokkar sem breyta orderfrumefni með því að beita order: -1og order: 6, í sömu röð.
.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
Samræma efni
Notaðu align-contenttól á flexbox ílátum til að stilla sveigjanlegum hlutum saman á þverásnum. Veldu úr start(sjálfgefið vafra), end, center, between, around, eða stretch. Til að sýna fram á þessi tól höfum við framfylgt flex-wrap: wrapog fjölgað sveigjanlegum hlutum.
Höfuð upp! Þessi eiginleiki hefur engin áhrif á stakar raðir af sveigjanlegum hlutum.
<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>
Móttækileg afbrigði eru einnig til fyrir 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
Fjölmiðlahlutur
Ertu að leita að endurtaka miðlunarhlutahlutann frá Bootstrap 4? Endurskapaðu það á skömmum tíma með nokkrum sveigjanlegum tólum sem leyfa enn meiri sveigjanleika og aðlögun en áður.
<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>Og segðu að þú viljir miðja efnið lóðrétt við hlið myndarinnar:
<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 tólum er lýst yfir í tólum API okkar í scss/_utilities.scss. Lærðu hvernig á að nota utilities 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,
),
),