Flex
Schnell verwalten de Layout, d'Ausrichtung an d'Gréisst vun de Gitterkolonnen, Navigatioun, Komponenten a méi mat enger voller Suite vu reaktiounsfäeger Flexbox Utilities. Fir méi komplex Implementatiounen kann personaliséiert CSS néideg sinn.
Aktivéiert flex Verhalen
Benotzt displayUtilities fir e Flexbox Container ze kreéieren an direkt Kanner Elementer a Flex Elementer ze transforméieren. Flex Behälter an Artikele kënne weider geännert ginn mat zousätzlech Flexeigenschaften.
<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>Reaktiounsfäeger Variatiounen existéieren och fir .d-flexan .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
Richtung
Setzt d'Richtung vu Flexartikelen an engem Flexbehälter mat Direktiounsservicer. An deene meeschte Fäll kënnt Dir déi horizontal Klass hei ausgoen well de Browser Standard ass row. Wéi och ëmmer, Dir kënnt Situatiounen stousse wou Dir dëse Wäert explizit musst setzen (wéi reaktiounsfäeg Layouten).
Benotzt .flex-rowfir eng horizontal Richtung ze setzen (de Browser-Standard), oder .flex-row-reversefir déi horizontal Richtung vun der Géigendeel Säit unzefänken.
<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>Benotzt .flex-columnfir eng vertikal Richtung ze setzen, oder .flex-column-reversefir déi vertikal Richtung vun der Géigendeel Säit unzefänken.
<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>Reaktiounsfäeger Variatiounen existéieren och fir 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
Justifiéieren Inhalt
Benotzt justify-contentUtilities op Flexbox Container fir d'Ausrichtung vu Flexartikelen op der Haaptachs z'änneren (d'X-Achs fir ze starten, Y-Achs wann flex-direction: column). Wielt aus start(Browser Standard), end, center, between, aroundoder 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>
Reaktiounsfäeger Variatiounen existéieren och fir 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
Elementer ausriichten
Benotzt align-itemsUtilities op Flexbox Container fir d'Ausrichtung vu Flexartikelen op der Kräizachs z'änneren (d'Y-Achs fir unzefänken, x-Achs wann flex-direction: column). Wielt aus start, end, center, baseline, oder stretch(Browser Standard).
<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>
Reaktiounsfäeger Variatiounen existéieren och fir 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
Alignéieren selwer
Benotzt align-selfUtilities op Flexbox Elementer fir hir Ausrichtung op der Kräizachs individuell z'änneren (d'Y-Achs fir unzefänken, x-Achs wann flex-direction: column). Wielt aus de selwechten Optiounen wéi align-items: start, end, center, baseline, oder stretch(Browser Standard).
<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>
Reaktiounsfäeger Variatiounen existéieren och fir 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
Fëllt
Benotzt d' .flex-fillKlass op eng Serie vu Geschwësterelementer fir se a Breeten ze zwéngen, déi gläich wéi hiren Inhalt sinn (oder gläich Breet wann hiren Inhalt hir Grenzkëschten net iwwerschreift) wärend all verfügbare horizontale Raum ophëlt.
<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>Reaktiounsfäeger Variatiounen existéieren och fir flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Wuesse a schrumpfen
Benotzt .flex-grow-*Utilities fir d'Fäegkeet vun engem Flexartikel ze wiesselen fir ze wuessen fir verfügbare Raum ze fëllen. Am Beispill hei drënner .flex-grow-1benotzen d'Elementer all verfügbare Raum et kann, wärend déi aner zwee Flexartikelen hiren néidege Raum erlaben.
<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>Benotzt .flex-shrink-*Utilities fir d'Fäegkeet vun engem Flexartikel ze schrumpfen wann néideg. Am Beispill hei ënnendrënner ass den zweeten Flex Element mat .flex-shrink-1gezwongen säin Inhalt op eng nei Linn ze wéckelen, "schrumpft" fir méi Plaz fir de fréiere Flex Element mat .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>Reaktiounsfäeger Variatiounen existéieren och fir flex-growan 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
Auto Margen
Flexbox kann e puer flott fantastesch Saache maachen wann Dir Flex Ausriichtungen mat Automargen mëscht. Hei ënnendrënner sinn dräi Beispiller fir d'Kontroll vu Flexartikelen iwwer Automargen: Standard (keng Automarge), zwee Elementer no riets drécken ( .me-auto), an zwee Elementer no lénks drécken ( .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>Mat alignéieren Artikelen
Vertikal réckelen ee Flex Element op d'Spëtzt oder ënnen vun engem Container andeems Dir align-items, flex-direction: column, an margin-top: autooder 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>Wickelen
Ännere wéi Flex Artikelen an engem Flex Container wéckelen. Wielt aus guer keng Wrapping (de Browser Standard) mat .flex-nowrap, Wrapping mat .flex-wrap, oder ëmgedréint Wrapping mat .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>
Reaktiounsfäeger Variatiounen existéieren och fir 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
Uerdnung
Ännert d' visuell Uerdnung vu spezifesche Flexartikele mat enger Handvoll orderUtilities. Mir bidden nëmmen Optiounen fir en Element éischt oder lescht ze maachen, souwéi e Reset fir d'DOM Bestellung ze benotzen. Wéi orderall ganz Zuel Wäert vun 0 bis 5 hëlt, addéiere personaliséiert CSS fir all zousätzlech Wäerter déi néideg sinn.
<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>Reaktiounsfäeger Variatiounen existéieren och fir 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
Zousätzlech ginn et och reaktiounsfäeger .order-firsta .order-lastKlassen déi den orderElement vun engem Element änneren andeems Dir order: -1an order: 6bzw.
.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
Alignéieren Inhalt
Benotzt align-contentUtilities op Flexbox Behälter fir Flex Elementer zesummen op der Kräizachs ze alignéieren. Wielt aus start(Browser Standard), end, center, between, aroundoder stretch. Fir dës Utilities ze demonstréieren, hu mir flex-wrap: wrapd'Zuel vun de Flexartikelen ëmgesat an erhéicht.
Kapp erop! Dëse Besëtz huet keen Effekt op eenzel Zeile vu Flexartikelen.
<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>
Reaktiounsfäeger Variatiounen existéieren och fir 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
Medien Objet
Sicht Dir de Medieobjektkomponent vu Bootstrap 4 ze replizéieren? Erstellt et a kenger Zäit mat e puer Flex Utilities déi nach méi Flexibilitéit a Personnalisatioun erlaben wéi virdrun.
<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>A sot Dir wëllt den Inhalt nieft dem Bild vertikal zentréieren:
<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 Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.
"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,
),
),