Bootstrap 4 Flex
Bootstrap 4 Flex
Gebruik flexklassen om de lay-out van Bootstrap 4-componenten te beheren.
Flexbox
Het grootste verschil tussen Bootstrap 3 en Bootstrap 4 is dat Bootstrap 4 nu flexbox gebruikt in plaats van floats om de lay-out af te handelen.
De Flexible Box Layout Module maakt het eenvoudiger om een flexibele, responsieve lay-outstructuur te ontwerpen zonder gebruik te maken van float of positionering. Als flex voor u nieuw is, kunt u erover lezen in onze CSS Flexbox Tutorial .
Let op: Flexbox wordt niet ondersteund in IE9 en eerdere versies.
Als je IE8-9-ondersteuning nodig hebt, gebruik dan Bootstrap 3. Het is de meest stabiele versie van Bootstrap en wordt nog steeds ondersteund door het team voor kritieke bugfixes en documentatiewijzigingen. Er worden echter geen nieuwe functies aan toegevoegd.
Gebruik de d-flexklasse om een flexboxcontainer te maken en directe kinderen om te zetten in flexitems:
Voorbeeld
Voorbeeld
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Gebruik de d-inline-flexklasse om een inline flexbox-container te maken:
Voorbeeld
Voorbeeld
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Horizontale richting
Gebruik .flex-rowom de flexitems horizontaal (naast elkaar) weer te geven. Dit is standaard.
Tip: Gebruik .flex-row-reverse
om de horizontale richting rechts uit te lijnen:
Voorbeeld
Voorbeeld
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Verticale richting
Gebruik .flex-columnom de flexitems verticaal (op elkaar) weer te geven of .flex-column-reverse
om de verticale richting om te keren:
Voorbeeld
Voorbeeld
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Inhoud uitvullen
Gebruik de .justify-content-*klassen om de uitlijning van flexitems te wijzigen. Geldige klassen zijn start(standaard), end, center, betweenof around:
Voorbeeld
Voorbeeld
<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>
Vulling / gelijke breedtes
Gebruik .flex-fillop flex-items om ze in gelijke breedtes te forceren:
Voorbeeld
Voorbeeld
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Toenemen
Gebruik .flex-grow-1op een flex item om de rest van de ruimte in te nemen. In het onderstaande voorbeeld nemen de eerste twee flexitems hun benodigde ruimte in beslag, terwijl het laatste item de rest van de beschikbare ruimte in beslag neemt:
Voorbeeld
Voorbeeld
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Tip: Gebruik .flex-shrink-1op een flexartikel om het indien nodig te laten krimpen.
Volgorde
Wijzig de visuele volgorde van een specifiek(e) flexitem(s) met de .orderklassen. Geldige klassen zijn van 0 tot 12, waarbij het laagste nummer de hoogste prioriteit heeft (volgorde-1 wordt weergegeven voor volgorde-2, enz.):
Voorbeeld
Voorbeeld
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Automatische marges
Voeg eenvoudig automatische marges toe aan flex-items met .mr-auto(items naar rechts duwen) of met .ml-auto(items naar links duwen):
Voorbeeld
Voorbeeld
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
Wikkelen
Bepaal hoe flexitems in een flexcontainer worden verpakt met .flex-nowrap(standaard) .flex-wrapof .flex-wrap-reverse.
Klik op de onderstaande knoppen om het verschil tussen de drie klassen te zien, door de verpakking van de flexitems in het voorbeeldvak te wijzigen:
Voorbeeld
Voorbeeld
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Inhoud uitlijnen
Regel de verticale uitlijning van verzamelde flexitems met de .align-content-*
klassen. Geldige klassen zijn .align-content-start(standaard) , .align-content-end, .align-content-center, .align-content-betweenen .align-content-around..align-content-stretch
Opmerking: deze klassen hebben geen effect op enkele rijen flexitems.
Voorbeeld
Voorbeeld
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Artikelen uitlijnen
Beheer de verticale uitlijning van enkele rijen flexitems met de .align-items-*
klassen. Geldige klassen zijn .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, en .align-items-stretch
(standaard).
Klik op onderstaande buttons om het verschil tussen de vijf klassen te zien:
Voorbeeld
Voorbeeld
<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>
Zelf uitlijnen
Beheer de verticale uitlijning van een opgegeven flexitem met de .align-self-*
klassen. Geldige klassen zijn .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, en .align-self-stretch
(standaard).
Klik op onderstaande buttons om het verschil tussen de vijf klassen te zien:
Voorbeeld
Voorbeeld
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Responsieve Flex-lessen
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |