Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Buigen

Beheer snel de lay-out, uitlijning en grootte van rasterkolommen, navigatie, componenten en meer met een volledige reeks responsieve flexbox-hulpprogramma's. Voor complexere implementaties kan aangepaste CSS nodig zijn.

Flexgedrag inschakelen

Pas displayhulpprogramma's toe om een ​​flexboxcontainer te maken en zet directe onderliggende elementen om in flexitems. Flexcontainers en items kunnen verder worden aangepast met extra flexeigenschappen.

Ik ben een flexboxcontainer!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Ik ben een inline flexbox container!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Er zijn ook responsieve varianten voor .d-flexen .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

Richting

Stel de richting van flexitems in een flexcontainer in met richtingshulpprogramma's. In de meeste gevallen kunt u de horizontale klasse hier weglaten omdat de browser standaard is row. U kunt echter situaties tegenkomen waarin u deze waarde expliciet moest instellen (zoals responsieve lay-outs).

Gebruik .flex-rowdit om een ​​horizontale richting in te stellen (de standaardinstelling van de browser) of .flex-row-reverseom de horizontale richting vanaf de andere kant te starten.

Flex artikel 1
Flex artikel 2
Flex artikel 3
Flex artikel 1
Flex artikel 2
Flex artikel 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Gebruik .flex-columnom een ​​verticale richting in te stellen of .flex-column-reverseom de verticale richting vanaf de andere kant te starten.

Flex artikel 1
Flex artikel 2
Flex artikel 3
Flex artikel 1
Flex artikel 2
Flex artikel 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Er zijn ook responsieve varianten voor 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

Inhoud uitvullen

Gebruik justify-contenthulpprogramma's op flexboxcontainers om de uitlijning van flexitems op de hoofdas te wijzigen (de x-as om te beginnen, y-as als flex-direction: column). Kies uit start(browserstandaard), end, center, between, aroundof evenly.

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

Er zijn ook responsieve varianten voor 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

Artikelen uitlijnen

Gebruik align-itemshulpprogramma's op flexbox-containers om de uitlijning van flex-items op de dwarsas te wijzigen (de y-as om te beginnen, x-as als flex-direction: column). Kies uit start, end, center, baselineof stretch(browserstandaard).

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

Er zijn ook responsieve varianten voor 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

Zelf uitlijnen

Gebruik align-selfhulpprogramma's op flexbox-items om hun uitlijning op de dwarsas afzonderlijk te wijzigen (de y-as om te beginnen, x-as als flex-direction: column). Kies uit dezelfde opties als align-items: start, end, center, baselineof stretch(browserstandaard).

Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
Flex artikel
Uitgelijnd flex item
Flex artikel
<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>

Er zijn ook responsieve varianten voor 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

Vullen

Gebruik de .flex-fillklasse op een reeks zusterelementen om ze in breedtes te dwingen die gelijk zijn aan hun inhoud (of gelijke breedten als hun inhoud hun kaderkaders niet overschrijdt), terwijl ze alle beschikbare horizontale ruimte innemen.

Flex item met veel inhoud
Flex artikel
Flex artikel
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Er zijn ook responsieve varianten voor flex-fill.

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

Groei en krimp

Gebruik .flex-grow-*hulpprogramma's om het vermogen van een flexitem om te groeien in te stellen om de beschikbare ruimte te vullen. In het onderstaande voorbeeld .flex-grow-1gebruiken de elementen alle beschikbare ruimte, terwijl de overige twee flex-items hun benodigde ruimte krijgen.

Flex artikel
Flex artikel
Derde flexartikel
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Gebruik .flex-shrink-*hulpprogramma's om de mogelijkheid van een flexitem om te verkleinen, indien nodig, in te schakelen. In het onderstaande voorbeeld wordt het tweede flexitem met .flex-shrink-1gedwongen om de inhoud ervan in een nieuwe regel te wikkelen, "krimpend" om meer ruimte te geven voor het vorige flexitem met .w-100.

Flex artikel
Flex artikel
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Er zijn ook responsieve varianten voor flex-growen 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

Automatische marges

Flexbox kan behoorlijk geweldige dingen doen als je flex-uitlijningen combineert met automatische marges. Hieronder ziet u drie voorbeelden van het besturen van flexitems via automatische marges: standaard (geen automatische marge), twee items naar rechts duwen ( .me-auto), en twee items naar links duwen ( .ms-auto).

Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

Met align-items

Verplaats één flexitem verticaal naar de boven- of onderkant van een container door align-items, flex-direction: column, en margin-top: autoof te mengen margin-bottom: auto.

Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
Flex artikel
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

Wrap

Wijzig hoe flexitems in een flexcontainer worden gewikkeld. Kies uit helemaal geen terugloop (de standaard browser) met .flex-nowrap, .flex-wrapterugloop met of omgekeerd teruglopen met .flex-wrap-reverse.

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

Er zijn ook responsieve varianten voor 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

Bestellen

Verander de visuele volgorde van specifieke flexitems met een handvol orderhulpprogramma's. We bieden alleen opties om een ​​item als eerste of laatste te maken, evenals een reset om de DOM-bestelling te gebruiken. Zoals orderelke integerwaarde van 0 tot 5 nodig heeft, voegt u aangepaste CSS toe voor eventuele aanvullende waarden.

Eerste flexartikel
Tweede flexartikel
Derde flexartikel
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

Er zijn ook responsieve varianten voor 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

Daarnaast zijn er ook responsive .order-firsten .order-lastclasses die het orderelement van een element veranderen door respectievelijk order: -1en toe te passen 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

Inhoud uitlijnen

Gebruik hulpprogramma's op flexboxcontainersalign-content om flexitems op de dwarsas uit te lijnen. Kies uit (browserstandaard), , , , of . Om deze hulpprogramma's te demonstreren, hebben we het aantal flexitems afgedwongen en verhoogd.startendcenterbetweenaroundstretchflex-wrap: wrap

Kop op! Deze eigenschap heeft geen effect op enkele rijen flexitems.

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

Er zijn ook responsieve varianten voor 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Media-object

Wilt u de media-objectcomponent van Bootstrap 4 repliceren ? Maak het in een mum van tijd opnieuw met een paar flexibele hulpprogramma's die nog meer flexibiliteit en maatwerk mogelijk maken dan voorheen.

Placeholder Image
Dit is wat inhoud van een mediacomponent. U kunt dit vervangen door elke inhoud en deze indien nodig aanpassen.
html
<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>

En stel dat je de inhoud naast de afbeelding verticaal wilt centreren:

Placeholder Image
Dit is wat inhoud van een mediacomponent. U kunt dit vervangen door elke inhoud en deze indien nodig aanpassen.
html
<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

Hulpprogramma's-API

Flexbox-hulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

    "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
    ),
    "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,
      ),
    ),