Hoppa till huvudinnehållet Hoppa till dokumentnavigering

Hantera snabbt layouten, justeringen och storleken på rutnätskolumner, navigering, komponenter och mer med en komplett uppsättning responsiva flexbox-verktyg. För mer komplexa implementeringar kan anpassad CSS vara nödvändig.

Aktivera flexbeteenden

Använd displayverktyg för att skapa en flexbox-behållare och förvandla direkta barnelement till flexartiklar. Flexbehållare och föremål kan modifieras ytterligare med ytterligare flexegenskaper.

Jag är en flexbox-behållare!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Jag är en inline flexbox-behållare!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Responsiva varianter finns också för .d-flexoch .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

Riktning

Ställ in riktningen för flexartiklar i en flexbehållare med riktningsverktyg. I de flesta fall kan du utelämna den horisontella klassen här eftersom webbläsarens standard är row. Du kan dock stöta på situationer där du behövde uttryckligen ställa in detta värde (som responsiva layouter).

Använd .flex-rowför att ställa in en horisontell riktning (webbläsarens standard) eller .flex-row-reverseför att starta den horisontella riktningen från motsatt sida.

Flex artikel 1
Flex objekt 2
Flex objekt 3
Flex artikel 1
Flex objekt 2
Flex objekt 3
<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>

Använd .flex-columnför att ställa in en vertikal riktning eller .flex-column-reverseför att starta den vertikala riktningen från motsatt sida.

Flex artikel 1
Flex objekt 2
Flex objekt 3
Flex artikel 1
Flex objekt 2
Flex objekt 3
<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>

Responsiva varianter finns också för 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

Motivera innehållet

Använd justify-contentverktyg på flexbox-behållare för att ändra justeringen av flex-objekt på huvudaxeln (x-axeln för att starta, y-axeln om flex-direction: column). Välj mellan start(webbläsarens standard), end, center, between, around, eller evenly.

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

Responsiva varianter finns också för 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

Justera objekt

Använd align-itemsverktyg på flexbox-behållare för att ändra justeringen av flexobjekt på tväraxeln (y-axeln för att starta, x-axeln om flex-direction: column). Välj mellan start, end, center, baseline, eller stretch(webbläsarstandard).

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

Responsiva varianter finns också för 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

Justera mig själv

Använd align-selfverktyg på flexbox-objekt för att individuellt ändra deras justering på tväraxeln (y-axeln för att starta, x-axeln om flex-direction: column). Välj från samma alternativ som align-items: start, end, center, baseline, eller stretch(webbläsarstandard).

Flex objekt
Justerat flexobjekt
Flex objekt
Flex objekt
Justerat flexobjekt
Flex objekt
Flex objekt
Justerat flexobjekt
Flex objekt
Flex objekt
Justerat flexobjekt
Flex objekt
Flex objekt
Justerat flexobjekt
Flex objekt
<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>

Responsiva varianter finns också för 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

Använd .flex-fillklassen på en serie syskonelement för att tvinga dem till bredder som är lika med deras innehåll (eller lika breda om innehållet inte överstiger gränsfälten) samtidigt som de tar upp allt tillgängligt horisontellt utrymme.

Flexobjekt med mycket innehåll
Flex objekt
Flex objekt
<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>

Responsiva varianter finns också för flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Växa och krympa

Använd .flex-grow-*verktyg för att växla ett flexobjekts förmåga att växa för att fylla tillgängligt utrymme. I exemplet nedan .flex-grow-1använder elementen allt tillgängligt utrymme de kan, samtidigt som de återstående två flexföremålen får sitt nödvändiga utrymme.

Flex objekt
Flex objekt
Tredje flexobjektet
<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>

Använd .flex-shrink-*verktyg för att växla ett flexobjekts förmåga att krympa om det behövs. I exemplet nedan tvingas det andra flexobjektet med .flex-shrink-1att slå in sitt innehåll till en ny rad, "krympande" för att ge mer utrymme för det föregående flexobjektet med .w-100.

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

Responsiva varianter finns också för flex-growoch 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

Automatiska marginaler

Flexbox kan göra några ganska fantastiska saker när du blandar flexjusteringar med automatiska marginaler. Nedan visas tre exempel på kontroll av flexobjekt via automatiska marginaler: standard (ingen automarginal), skjuta två objekt åt höger ( .me-auto) och skjuta två objekt åt vänster ( .ms-auto).

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

Med align-objekt

Flytta ett flexobjekt vertikalt till toppen eller botten av en behållare genom att blanda align-items, flex-direction: column, och margin-top: autoeller margin-bottom: auto.

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

Slå in

Ändra hur flexartiklar slås in i en flexbehållare. Välj mellan ingen lindning alls (webbläsarens standard) med .flex-nowrap, lindning med .flex-wrap, eller omvänd lindning med .flex-wrap-reverse.

Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex flex-nowrap">
  ...
</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex flex-wrap">
  ...
</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsiva varianter finns också för 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

Ordning

Ändra den visuella ordningen för specifika flexartiklar med en handfull orderverktyg. Vi tillhandahåller endast alternativ för att göra en vara först eller sist, samt en återställning för att använda DOM-ordern. Som ordertar alla heltalsvärden från 0 till 5, lägg till anpassad CSS för eventuella ytterligare värden som behövs.

Första flexobjektet
Andra flexobjektet
Tredje flexobjektet
<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>

Responsiva varianter finns också för 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

Dessutom finns det också responsiva .order-firstoch .order-lastklasser som ändrar orderett elements genom att tillämpa order: -1respektive 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

Justera innehållet

Använd verktyg på flexbox-behållare för att rikta ihopalign-content flexartiklar på tväraxeln . Välj mellan (webbläsarens standard), , , , , eller . För att demonstrera dessa verktyg har vi tillämpat och ökat antalet flexartiklar.startendcenterbetweenaroundstretchflex-wrap: wrap

Se upp! Den här egenskapen har ingen effekt på enstaka rader med flexartiklar.

Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex align-content-end flex-wrap">...</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex align-content-center flex-wrap">...</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex align-content-between flex-wrap">...</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex align-content-around flex-wrap">...</div>
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
Flex objekt
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsiva varianter finns också för 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

Mediaobjekt

Vill du replikera medieobjektkomponenten från Bootstrap 4? Återskapa det på nolltid med några flexverktyg som tillåter ännu mer flexibilitet och anpassning än tidigare.

Placeholder Image
Det här är en del innehåll från en mediekomponent. Du kan ersätta detta med vilket innehåll som helst och justera det efter behov.
<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>

Och säg att du vill centrera innehållet vertikalt bredvid bilden:

Placeholder Image
Det här är en del innehåll från en mediekomponent. Du kan ersätta detta med vilket innehåll som helst och justera det efter behov.
<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-verktyg deklareras i vårt verktygs-API i scss/_utilities.scss. Lär dig hur du använder 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,
      ),
    ),