Bootstrap 5Flex

flexbox

Den största skillnaden mellan Bootstrap 3 och Bootstrap 4 & 5 är att Bootstrap 5 nu använder flexbox istället för flytande för att hantera layout.

flexibel ramar-läggning modul, som gör det möjligt att designa flexibla responsiva layoutstrukturer utan att använda flytande eller positionering.

Om du inte är bekant med flex, kan du läsa i vår CSS Flexbox-guide lär dig

Kommentar:IE9 och tidigare versioner stöder inte Flexbox.

Kommentar:Om du behöver stöd för IE8-9, använd Bootstrap 3. Det är den mest stabila Bootstrap-versionen, och teamet fortsätter att stödja den för kritiska felkorrigeringar och dokumentationsändringar. Men inga nya funktioner kommer att läggas till i den.

Exempel

För att skapa en flexbox-container och konvertera direkta underkomponenter till flex-element, använd d-flex Klass:

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

Prova själv

Exempel

För att skapa en inline flexbox-container, använd d-inline-flex Klass:

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

Prova själv

Horisontal

Använd .flex-row Visa flex-elementen horisontellt (vid sidan om varandra). Detta är standardinställningen.

Tips:Använd .flex-row-reverse Kan justera till höger på horisontal riktning:

Exempel

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

Prova själv

vertikal

Använd .flex-column Visa flex-elementen vertikalt (staplade på varandra), eller använd .flex-column-reverse Invertera vertikaldirektionen:

Exempel

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

Prova själv

Justera innehåll

Använd .justify-content-* Klasser kan ändra justeringsmetoden för de flesta flex-elementen. Giltiga klasser är:

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

Exempel

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

Prova själv

Lik bredd

Använd på flex-objektet .flex-fill Kan tvinga dem att vara lika breda:

Exempel

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Mjukkomponent 1</div>
  <div class="p-2 bg-warning flex-fill">Mjukkomponent 2</div>
  <div class="p-2 bg-primary flex-fill">Mjukkomponent 3</div>
</div>

Prova själv

Expandera

Använd på flex-objektet .flex-grow-1 Kan använda överskottsyta. I följande exempel tar de två första flex-elementen nödvändigt utrymme, medan det sista elementet tar det överskjutande tillgängliga utrymmet:

Exempel

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

Prova själv

Tips:Använd på flex-objektet .flex-shrink-1 kan göras mindre om nödvändigt.

Ordning

Använd .order Klassar kan ändra den visuella ordningen för specifika flex-objekt. Giltiga klasser är från 0 till 5, där den lägsta numret har högsta prioritet (order-1 visas före order-2, och så vidare):

Exempel

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

Prova själv

Automatisk marginal

Använd .ms-autoeller använd .me-auto（flytta objektet till vänster）Det är enkelt att lägga till automatisk marginal till elastiska objekt:

Exempel

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

Prova själv

Radbrytning

Genom .flex-nowrap（standard）、.flex-wrap eller .flex-wrap-reverse，kontrollerar hur flex-objektet pakas in i flex-kont容naren.

Exempel

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

Prova själv

Justera innehåll

Använd .placer innehållet-* Klassar som kontrollerar den vertikala justeringen av elastiska objekt. Giltiga klasser är:

  • .placer innehållet i början(Standard)
  • .placer innehållet i slutet
  • .centrera innehållet
  • .between-content
  • .around-content
  • .stretch-content

Kommentar:Dessa klasser har ingen inverkan på en rad elastiska objekt.

Klicka på knappen nedan för att se skillnaderna mellan de fem klasserna genom att ändra den vertikala justeringen för elastiska objekten i exempelramen:

Exempel

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

Prova själv

Justera objekt

Använd .align-items-* klasskontrollen radDen vertikala justeringen för elastiska objekten. Giltiga klasser är:

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

Klicka på knappen nedan för att se skillnaderna mellan de fem klasserna:

Exempel

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

Prova själv

self-justering

Använd .align-self-* klasskontrollspecificera elastiska objektden vertikala justeringen. Giltiga klasser är:

  • .start-self
  • .end-self
  • .center-self
  • .align-self-baseline
  • .stretch-self(Standard)

Klicka på knappen nedan för att se skillnaden mellan de fem klasserna:

Exempel

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

Prova själv

Responsiva Flex-klasser

Alla flex-klasser har extra responsiva klasser, vilket gör det enkelt att sätta specifika flex-klasser på specifika skärmstorlekar.

*-tecknet kan ersättas med sm, md, lg, xl eller xxl, vilket representerar små, medelstora, stora, mycket stora och jättestora skärmar.

Sök specifika flex-klasser ..

Klass Beskrivning Exempel
Flex-container
.d-*-flex Skapa en flexbox-container för olika skärmar. Prova
.d-*-inline-flex Skapa en radin flexbox-container för olika skärmar. Prova
Riktning
.flex-*-row Visa flexibla objekt horisontellt på olika skärmar. Prova
.flex-*-row-reverse Visa flexibla objekt horisontellt och högerjusterat på olika skärmar. Prova
.flex-*-column Visa flexibla objekt vertikalt på olika skärmar. Prova
.flex-*-column-reverse Visa flexibla objekt vertikalt i motsatt ordning på olika skärmar. Prova
Innehåll i rad
.justify-content-*-start Visa flexibla objekt från början (vänsterjusterad) på olika skärmar. Prova
.justify-content-*-end Visa flexibla objekt i änden (högerjusterad) på olika skärmar. Prova
.justify-content-*-center Visa flexibla objekt i mitten av olika skärmar. Prova
.justify-content-*-between Visa flexibla objekt lika på olika skärmar. Prova
.justify-content-*-around Visa flexibla objekt 'omgiven' på olika skärmar. Prova
Fyll / lika bredd
.flex-*-fill Tvinga flexibla objekt att ha samma bredd på olika skärmar. Prova
expansion
.flex-*-grow-0 Låt inte objekt expanderas på olika skärmar.
.flex-*-grow-1 gör att objekt expanderar på olika skärmar.
minskning
.flex-*-shrink-0 Förhindra att objekt kontraherar på olika skärmar.
.flex-*-shrink-1 Låt objekt kontrahera på olika skärmar.
Ordning
.order-*-0-12 Ändra ordning från 0 till 12 på små skärmar. Prova
Radbrytning
.flex-*-nowrap Förhindra radbrytning av objekt på olika skärmar. Prova
.flex-*-wrap Radbryt objekt på olika skärmar. Prova
.flex-*-wrap-reverse Invertera radbrytning av objekt på olika skärmar. Prova
Justera innehåll
.align-content-*-start Justera objekt från början på olika skärmar. Prova
.align-content-*-end Justera objekt i slutet på olika skärmar. Prova
.align-content-*-center Justera objekt i mitten på olika skärmar. Prova
.align-content-*-around Justera objekt runt olika skärmar. Prova
.align-content-*-stretch Sträcka ut objekt på olika skärmar. Prova
Justera objekt
.align-items-*-start Justera enradiga objekt från början på olika skärmar. Prova
.align-items-*-end Justera enradiga objekt i slutet på olika skärmar. Prova
.align-items-*-center Justera enradiga objekt i mitten på olika skärmar. Prova
.align-items-*-baseline Justera enradiga objekt på baslinjen på olika skärmar. Prova
.align-items-*-stretch Sträcka ut enradiga objekt på olika skärmar. Prova
Justera själv
.align-self-*-start Justera elastiska objekt från början på olika skärmar. Prova
.align-self-*-end Justera elastiska objekt i slutet på olika skärmar. Prova
.align-self-*-center Justera elastiska objekt i mitten på olika skärmar. Prova
.align-self-*-baseline Justera elastiska objekt på baslinjen på olika skärmar. Prova
.align-self-*-stretch Sträcka ut elastiska objekt på olika skärmar. Prova