Flex
Beheer snel de layout, uitlijning en afmetingen van grid-kolommen, navigatie, componenten en meer met een compleet pakket responsieve flexbox-utilities. Voor complexere implementaties kan eigen CSS nodig zijn.
Flex-gedrag inschakelen
Pas display-utilities toe om een flexbox-container te maken en directe kindelementen in flex-items om te zetten. Flex-containers en -items kunnen verder worden aangepast met aanvullende flex-eigenschappen.
<div class="d-flex p-2">Ik ben een flexbox-container!</div><div class="d-inline-flex p-2">Ik ben een inline flexbox-container!</div>Er bestaan ook responsieve varianten van .d-flex en .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
Bepaal de richting van flex-items in een flex-container met richting-utilities. In de meeste gevallen kun je de horizontale klasse hier weglaten, omdat de browserstandaard row is. Toch kun je situaties tegenkomen waarin je deze waarde expliciet moet instellen (zoals bij responsieve layouts).
Gebruik .flex-row voor een horizontale richting (de browserstandaard), of .flex-row-reverse om de horizontale richting vanaf de andere kant te laten beginnen.
<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-column voor een verticale richting, of .flex-column-reverse om de verticale richting vanaf de andere kant te laten beginnen.
<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 bestaan 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
Justify content
Gebruik justify-content-utilities op flexbox-containers om de uitlijning van flex-items op de hoofdas te wijzigen (om te beginnen de x-as, of de y-as bij flex-direction: column). Kies uit start (browserstandaard), end, center, between, around of 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>Er bestaan 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
Align items
Gebruik align-items-utilities op flexbox-containers om de uitlijning van flex-items op de kruisas te wijzigen (om te beginnen de y-as, of de x-as bij flex-direction: column). Kies uit start, end, center, baseline of stretch (browserstandaard).
<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 bestaan 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
Align self
Gebruik align-self-utilities op flexbox-items om hun uitlijning op de kruisas individueel te wijzigen (om te beginnen de y-as, of de x-as bij flex-direction: column). Kies uit dezelfde opties als bij align-items: start, end, center, baseline of stretch (browserstandaard).
<div class="align-self-start">Uitgelijnd flex-item</div>
<div class="align-self-end">Uitgelijnd flex-item</div>
<div class="align-self-center">Uitgelijnd flex-item</div>
<div class="align-self-baseline">Uitgelijnd flex-item</div>
<div class="align-self-stretch">Uitgelijnd flex-item</div>Er bestaan 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
Fill
Gebruik de klasse .flex-fill op een reeks aangrenzende elementen om ze breedtes te geven die gelijk zijn aan hun content (of gelijke breedtes als hun content hun border-boxes niet overschrijdt), terwijl ze alle beschikbare horizontale ruimte innemen.
<div class="d-flex">
<div class="p-2 flex-fill">Flex-item met veel content</div>
<div class="p-2 flex-fill">Flex-item</div>
<div class="p-2 flex-fill">Flex-item</div>
</div>Er bestaan ook responsieve varianten voor flex-fill.
-
.flex-fill -
.flex-sm-fill -
.flex-md-fill -
.flex-lg-fill -
.flex-xl-fill -
.flex-xxl-fill
Grow en shrink
Gebruik .flex-grow-*-utilities om te schakelen of een flex-item mag groeien om de beschikbare ruimte te vullen. In het onderstaande voorbeeld gebruikt het .flex-grow-1-element alle beschikbare ruimte die het kan krijgen, terwijl de overige twee flex-items de ruimte houden die ze nodig hebben.
<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">Derde flex-item</div>
</div>Gebruik .flex-shrink-*-utilities om te schakelen of een flex-item zo nodig mag krimpen. In het onderstaande voorbeeld wordt het tweede flex-item met .flex-shrink-1 gedwongen zijn inhoud naar een nieuwe regel te laten omslaan en "krimpt" het om meer ruimte te geven aan het voorgaande flex-item met .w-100.
<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 bestaan ook responsieve varianten voor flex-grow en 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 indrukwekkende dingen doen wanneer je flex-uitlijningen met automatische marges combineert. Hieronder zie je drie voorbeelden van het sturen van flex-items via automatische marges: standaard (geen automatische marge), twee items naar rechts duwen (.me-auto), en twee items naar links duwen (.ms-auto).
<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 flex-item verticaal naar de boven- of onderkant van een container door align-items, flex-direction: column en margin-top: auto of margin-bottom: auto te combineren.
<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 flex-items in een flex-container omslaan. Kies uit helemaal niet omslaan (de browserstandaard) met .flex-nowrap, omslaan met .flex-wrap, of omgekeerd omslaan met .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>Er bestaan 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
Order
Wijzig de visuele volgorde van specifieke flex-items met een handvol order-utilities. We bieden alleen opties om een item als eerste of als laatste te plaatsen, plus een reset om de DOM-volgorde te gebruiken. Omdat order elke gehele waarde van 0 tot en met 5 accepteert, voeg je voor extra waarden eigen CSS toe.
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">Eerste flex-item</div>
<div class="order-2 p-2">Tweede flex-item</div>
<div class="order-1 p-2">Derde flex-item</div>
</div>Er bestaan ook responsieve varianten voor order.
Daarnaast zijn er ook responsieve klassen .order-first en .order-last die de order van een element wijzigen door respectievelijk order: -1 en order: 6 toe te passen.
-
.order- -
.order-sm- -
.order-md- -
.order-lg- -
.order-xl- -
.order-xxl-
Align content
Gebruik align-content-utilities op flexbox-containers om flex-items samen op de kruisas uit te lijnen. Kies uit start (browserstandaard), end, center, between, around of stretch. Om deze utilities te demonstreren hebben we flex-wrap: wrap afgedwongen en het aantal flex-items verhoogd.
Let op! Deze eigenschap heeft geen effect op een enkele rij flex-items.
<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>Er bestaan 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
Wil je het media object-component uit Bootstrap 4 nabouwen? Maak het in een handomdraai opnieuw met een paar flex-utilities, die nog meer flexibiliteit en aanpasbaarheid bieden dan voorheen.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e5e5e5%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23999%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" width="100" height="100" alt="Image">
</div>
<div class="flex-grow-1 ms-3">
Dit is wat content uit een media-component. Je kunt dit door willekeurige content vervangen en naar behoefte aanpassen.
</div>
</div>En stel dat je de content naast de afbeelding verticaal wilt centreren:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e5e5e5%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23999%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" width="100" height="100" alt="Image">
</div>
<div class="flex-grow-1 ms-3">
Dit is wat content uit een media-component. Je kunt dit door willekeurige content vervangen en naar behoefte aanpassen.
</div>
</div>Sass
Utilities-API
Flexbox-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.
Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.