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

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

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, betweenoder around.

<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>

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-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

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é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

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

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

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 ( .mr-auto), an zwee Elementer no lénks drécken ( .ml-auto).

Leider ënnerstëtzen IE10 an IE11 net richteg Automargen op Flexartikelen deenen hir Elteren en net-Standardwäert hunn justify-content. Kuckt dës StackOverflow Äntwert fir méi Detailer.

<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="mr-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="ml-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

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 orderhëlt all ganz Zuel Wäert (zB, 5), Füügt 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-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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-between
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch