Bootstrap 5 Flex

Elastische kast

De grootste verschillen tussen Bootstrap 3 en Bootstrap 4 & 5 liggen in het feit dat Bootstrap 5 nu flexbox gebruikt in plaats van浮动 om lay-out te verwerken.

elastische frame layout module, die het mogelijk maakt om eenvoudiger elastische responsieve lay-outstructuren te ontwerpen zonder浮动 of positionering te gebruiken.

Als je onbekend bent met flex, kun je onze CSS Flexbox Handleiding leren.

Opmerking:IE9 en eerder versies ondersteunen geen Flexbox.

Opmerking:Als je ondersteuning voor IE8-9 nodig hebt, gebruik dan Bootstrap 3. Dit is de meest stabiele versie van Bootstrap, en het team ondersteunt het nog steeds voor cruciale foutoplossingen en document wijzigingen. Maar er zullen geen nieuwe functies aan worden toegevoegd.

Voorbeeld

Om een flexbox-container te maken en directe nakomelingen om te zetten in flex-items, gebruik dan d-flex Klasse:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>

Probeer het zelf

Voorbeeld

Om een inline flexbox-container te maken, gebruik dan d-inline-flex Klasse:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>

Probeer het zelf

horizontale richting

Gebruik .flex-row Toon flex-elementen horizontaal (naar elkaar gepositioneerd). Dit is de standaard instelling.

Tip:Gebruik .flex-row-reverse Rechts uitlijnen in de horizontale richting:

Voorbeeld

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>

Probeer het zelf

verticale richting

Gebruik .flex-column Toon flex-elementen verticaal (naar elkaar gepositioneerd), of gebruik .flex-column-reverse Keer de verticale richting om:

Voorbeeld

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>

Probeer het zelf

Keer de wrap van items op verschillende schermen om.

Gebruik .justify-content-* De klasse kan de uitlijning van de flexibele items wijzigen. Geldige klassen zijn:

  • start(Standaard)
  • end
  • center
  • between
  • around

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>

Probeer het zelf

Gelijke breedte

Gebruik op flex-items .flex-fill U kunt hen dwingen gelijke breedte te hebben:

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>

Probeer het zelf

Uitrekken

Gebruik op flex-items .flex-grow-1 Het kan extra ruimte innemen. In het volgende voorbeeld, nemen de eerste twee flex-elementen de benodigde ruimte in beslag, terwijl het laatste element de overblijvende beschikbare ruimte inneemt:

Voorbeeld

<div class="d-flex">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Elastisch item 3</div>
</div>

Probeer het zelf

Tip:Gebruik op flex-items .flex-shrink-1 maakt het mogelijk om het te laten krimpen indien nodig.

Maak items op verschillende schermen krimpen.

Gebruik .order Klasse kan de visuele volgorde van specifieke flex-items wijzigen. Geldige klassen variëren van 0 tot 5, waarbij de laagste nummers de hoogste prioriteit hebben (order-1 wordt weergegeven vóór order-2, enzovoort):

Voorbeeld

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Elastisch item 1</div>
  <div class="p-2 bg-warning order-2">Elastisch item 2</div>
  <div class="p-2 bg-primary order-1">Elastisch item 3</div>
</div>

Probeer het zelf

automatische marges

Gebruik .ms-auto（zet item naar rechts）of gebruik .me-auto（zet item naar links）Maak het eenvoudig om automatisch marges toe te voegen aan elastische items:

Voorbeeld

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 bg-primary">Elastisch item 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Elastisch item 1</div>
  <div class="p-2 bg-warning">Elastisch item 2</div>
  <div class="p-2 me-auto bg-primary">Elastisch item 3</div>
</div>

Probeer het zelf

Verander van 0 tot 12 op kleine schermen.

via .flex-nowrap（standaard）、.flex-wrap of .flex-wrap-reverse，en controleert hoe flex-items worden verpakt in een flex-container.

Voorbeeld

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

Probeer het zelf

Keer de wrap van items op verschillende schermen om.

Gebruik .align-content-* Klasse controleert de verticale uitlijning van elastische items. Geldige klassen zijn:

  • .align-content-start(Standaard)
  • .align-content-end
  • .align-content-center
  • .between-content
  • .around-content
  • .stretch-content

Opmerking:Deze klassen hebben geen invloed op enkele regel elastische items.

Klik op de onderstaande knop om het verschil tussen de vijf klassen te zien: wijzig de verticale uitlijning van de elastische items in het voorbeeldvenster.

Voorbeeld

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

Probeer het zelf

Richt items uit

Gebruik .align-items-* klassebeheerenkele regelde verticale uitlijning van elastische items. Geldige klassen zijn:

  • .start-items
  • .end-items
  • .center-items
  • .baseline-items
  • .stretch-items(Standaard)

Klik op de onderstaande knop om het verschil tussen de vijf klassen te zien:

Voorbeeld

<div class="d-flex start-items">..</div>
<div class="d-flex end-items">..</div>
<div class="d-flex center-items">..</div>
<div class="d-flex baseline-items">..</div>
<div class="d-flex stretch-items">..</div>

Probeer het zelf

zelfuitlijning

Gebruik .align-self-* klassebeheerspecifieer elastische itemsde verticale uitlijning. Geldige klassen zijn:

  • .start-self
  • .end-self
  • .center-self
  • .baseline-self
  • .stretch-self(Standaard)

Klik op de knop hieronder om het verschil tussen de vijf classes te zien:

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>

Probeer het zelf

Responsieve Flex Classes

Alle flex classes hebben extra responsieve classes, waardoor het gemakkelijk is om specifieke flex classes in een specifieke schermgrootte in te stellen.

* kan worden vervangen door sm, md, lg, xl of xxl, wat respectievelijk staat voor klein, medium, groot, zeer groot en extra groot scherm.

Zoek specifieke flex classes ..

Class Beschrijving Voorbeeld
Flex container
.d-*-flex Maak een flexbox container voor verschillende schermen. Probeer het uit
.d-*-inline-flex Maak een flexbox container in een regel voor verschillende schermen. Probeer het uit
Richting
.flex-*-row Toon flexibele items horizontaal op verschillende schermen. Probeer het uit
.flex-*-row-reverse Toon flexibele items horizontaal en rechts uitgelijnd op verschillende schermen. Probeer het uit
.flex-*-column Toon flexibele items verticaal op verschillende schermen. Probeer het uit
.flex-*-column-reverse Toon flexibele items verticaal in omgekeerde volgorde op verschillende schermen. Probeer het uit
Gelijkgestrekte inhoud
.justify-content-*-start Toon flexibele items aan het begin (links uitgelijnd) op verschillende schermen. Probeer het uit
.justify-content-*-end Toon flexibele items aan het einde (rechts uitgelijnd) op verschillende schermen. Probeer het uit
.justify-content-*-center Toon flexibele items in het midden van de flexbox container op verschillende schermen. Probeer het uit
.justify-content-*-between Toon flexibele items gelijkmatig op verschillende schermen. Probeer het uit
.justify-content-*-around Toon flexibele items 'omringd' op verschillende schermen. Probeer het uit
Vullen / Breedte gelijk
.flex-*-fill Forceer flexibele items dezelfde breedte op verschillende schermen. Probeer het uit
Uitbreiden
.flex-*-grow-0 Laat items niet uiteenlopend op verschillende schermen.
.flex-*-grow-1 Maak items uiteenlopend op verschillende schermen.
Krimp
.flex-*-shrink-0 不要让项目在不同屏幕上收缩。
Laat items op verschillende schermen niet krimpen. .flex-*-shrink-1
Maak items op verschillende schermen krimpen.
Volgorde .order-*-0-12 Probeer het uit
Verander van 0 tot 12 op kleine schermen.
Reep .flex-*-nowrap Probeer het uit
Laat items op verschillende schermen niet in reep brengen. .flex-*-wrap Probeer het uit
Breng items op verschillende schermen in reep. .flex-*-wrap-reverse Probeer het uit
Keer de wrap van items op verschillende schermen om.
.align-content-*-start Richt items uit op de begindelen van verschillende schermen. Probeer het uit
.align-content-*-end Richt items uit op het einde van verschillende schermen. Probeer het uit
.align-content-*-center Richt items uit op het midden van verschillende schermen. Probeer het uit
.align-content-*-around Richt items uit op de omliggende delen van verschillende schermen. Probeer het uit
.align-content-*-stretch Breid items uit op verschillende schermen. Probeer het uit
Richt items uit
.align-items-*-start Richt een rij item uit op de begindelen van verschillende schermen. Probeer het uit
.align-items-*-end Richt een rij item uit op het einde van verschillende schermen. Probeer het uit
.align-items-*-center Richt een rij item uit op het midden van verschillende schermen. Probeer het uit
.align-items-*-baseline Richt een rij item uit op de baslijn van verschillende schermen. Probeer het uit
.align-items-*-stretch Breid een rij item uit op verschillende schermen. Probeer het uit
Richt zichzelf uit
.align-self-*-start Richt flexibele items uit op de begindelen van verschillende schermen. Probeer het uit
.align-self-*-end Richt flexibele items uit op het einde van verschillende schermen. Probeer het uit
.align-self-*-center Richt flexibele items uit op het midden van verschillende schermen. Probeer het uit
.align-self-*-baseline Richt flexibele items uit op de baslijn van verschillende schermen. Probeer het uit
.align-self-*-stretch Breid flexibele items uit op verschillende schermen. Probeer het uit