Spring til hovedindhold Spring til dokumentnavigation

Administrer hurtigt layoutet, justeringen og størrelsen af ​​gitterkolonner, navigation, komponenter og mere med en komplet suite af responsive flexbox-værktøjer. Til mere komplekse implementeringer kan tilpasset CSS være nødvendig.

Aktiver flexadfærd

Anvend displayhjælpeprogrammer til at oprette en flexbox-beholder og transformere direkte børneelementer til flex-genstande. Flexbeholdere og emner kan modificeres yderligere med yderligere flexegenskaber.

Jeg er en flexbox container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Jeg er en inline flexbox container!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Der findes også responsive variationer for .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

Retning

Indstil retningen for flexvarer i en flexbeholder med retningsværktøjer. I de fleste tilfælde kan du udelade den horisontale klasse her, da browserens standard er row. Du kan dog støde på situationer, hvor du var nødt til eksplicit at angive denne værdi (såsom responsive layouts).

Brug .flex-rowtil at indstille en vandret retning (browserens standard), eller .flex-row-reversetil at starte den vandrette retning fra den modsatte side.

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

Brug .flex-columntil at indstille en lodret retning eller .flex-column-reversetil at starte den lodrette retning fra den modsatte side.

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

Der findes også responsive variationer for 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

Begrund indholdet

Brug justify-contenthjælpeprogrammer på flexbox-beholdere til at ændre justeringen af ​​flex-emner på hovedaksen (x-aksen til start, y-aksen hvis flex-direction: column). Vælg mellem start(standard browser), end, center, between, around, eller evenly.

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

Der findes også responsive variationer for 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

Juster elementer

Brug align-itemshjælpeprogrammer på flexbox-beholdere til at ændre justeringen af ​​flex-emner på tværaksen (y-aksen til start, x-aksen hvis flex-direction: column). Vælg mellem start, end, center, baseline, eller stretch(browserstandard).

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

Der findes også responsive variationer for 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

Juster selv

Brug align-selfhjælpeprogrammer på flexbox-genstande til individuelt at ændre deres justering på tværaksen (y-aksen til start, x-aksen hvis flex-direction: column). Vælg mellem de samme muligheder som align-items: start, end, center, baseline, eller stretch(browserstandard).

Flex vare
Justeret flexvare
Flex vare
Flex vare
Justeret flexvare
Flex vare
Flex vare
Justeret flexvare
Flex vare
Flex vare
Justeret flexvare
Flex vare
Flex vare
Justeret flexvare
Flex vare
<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>

Der findes også responsive variationer for 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

Fylde

Brug .flex-fillklassen på en række søskendeelementer til at tvinge dem til bredder svarende til deres indhold (eller lige store bredder, hvis deres indhold ikke overstiger deres kantfelter), mens de optager al tilgængelig vandret plads.

Flexvare med meget indhold
Flex vare
Flex vare
<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>

Der findes også responsive variationer for flex-fill.

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

Vokse og krympe

Brug .flex-grow-*hjælpeprogrammer til at skifte en flex-vares evne til at vokse til at fylde ledig plads. I eksemplet nedenfor .flex-grow-1bruger elementerne al tilgængelig plads, de kan, mens de tillader de resterende to flex-elementer deres nødvendige plads.

Flex vare
Flex vare
Tredje flex element
<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>

Brug .flex-shrink-*hjælpeprogrammer til at skifte en flex-vares evne til at krympe, hvis det er nødvendigt. I eksemplet nedenfor er det andet flexelement med .flex-shrink-1tvunget til at pakke sit indhold til en ny linje, der "krymper" for at give mere plads til det forrige flexelement med .w-100.

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

Der findes også responsive variationer for 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

Automargener

Flexbox kan gøre nogle ret fantastiske ting, når du blander flexjusteringer med automargener. Nedenfor er vist tre eksempler på styring af fleksible elementer via automargener: standard (ingen automargen), skubbe to elementer til højre ( .me-auto) og skubbe to elementer til venstre ( .ms-auto).

Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
<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-items

Flyt et fleksibelt emne lodret til toppen eller bunden af ​​en beholder ved at blande align-items, flex-direction: column, og margin-top: autoeller margin-bottom: auto.

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

Indpakning

Ændre, hvordan flexvarer pakkes ind i en flexbeholder. Vælg mellem slet ingen indpakning (browserens standard) med .flex-nowrap, indpakning med .flex-wrapeller omvendt indpakning med .flex-wrap-reverse.

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

Der findes også responsive variationer for 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

Bestille

Skift den visuelle rækkefølge af specifikke flex-genstande med en håndfuld orderhjælpeprogrammer. Vi giver kun muligheder for at lave en vare først eller sidst, samt en nulstilling for at bruge DOM-ordren. Som orderdet tager enhver heltalsværdi fra 0 til 5, skal du tilføje tilpasset CSS for eventuelle yderligere nødvendige værdier.

Første flexvare
Anden flexvare
Tredje flex element
<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>

Der findes også responsive variationer for 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

Derudover er der også responsive .order-firstog .order-lastklasser, der ændrer orderet elements ved at anvende order: -1og order: 6hhv.

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

Juster indhold

Brug align-contenthjælpeprogrammer på flexbox-beholdere til at justere flex-emner tværs af aksen. Vælg mellem start(standard browser), end, center, between, around, eller stretch. For at demonstrere disse hjælpeprogrammer har vi håndhævet flex-wrap: wrapog øget antallet af flexvarer.

Heads up! Denne egenskab har ingen effekt på enkelte rækker af flexvarer.

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

Der findes også responsive variationer for 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

Medieobjekt

Ønsker du at replikere medieobjektkomponenten fra Bootstrap 4? Genskab det på ingen tid med nogle få flex-værktøjer, der tillader endnu mere fleksibilitet og tilpasning end før.

Placeholder Image
Dette er noget indhold fra en mediekomponent. Du kan erstatte dette med ethvert indhold og justere 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>

Og sig, at du vil centrere indholdet lodret ved siden af ​​billedet:

Placeholder Image
Dette er noget indhold fra en mediekomponent. Du kan erstatte dette med ethvert indhold og justere 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

Hjælpeprogrammer API

Flexbox-værktøjer er deklareret i vores utilities API i scss/_utilities.scss. Lær, hvordan du bruger 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,
      ),
    ),