Bootstrap 5 Flex

fleksible rammer

Den største forskel mellem Bootstrap 3 og Bootstrap 4 & 5 er, at Bootstrap 5 nu bruger flexbox i stedet for flydende til at håndtere layout.

en fleksibel boks layoutmodul, som gør det lettere at designe fleksible responsive layoutstrukturer uden at bruge flydende eller positionering.

Hvis du ikke er bekendt med flex, kan du finde mere information i vores CSS Flexbox Tutorial lær

Bemærk:IE9 og tidligere versioner understøtter ikke Flexbox.

Bemærk:Hvis du har brug for støtte til IE8-9, skal du bruge Bootstrap 3. Det er den mest stabile Bootstrap-version, og teamet fortsætter med at støtte den med kritiske fejlrettelser og dokumentationsændringer. Men der vil ikke blive tilføjet nye funktioner til den.

Eksempel

Hvis du vil oprette en flexbox-container og konvertere direkte underordnede elementer til flex-elementer, skal du bruge d-flex Klasser:

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

Prøv det selv

Eksempel

Hvis du vil oprette en inline flexbox-container, skal du bruge d-inline-flex Klasser:

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

Prøv det selv

Vandret retning

Brug .flex-row Vis fleksible elementer vandret (side om side). Dette er standardindstillingen.

Tip:brug .flex-row-reverse Kan justere højrejustering i vandret retning:

Eksempel

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

Prøv det selv

lodret retning

Brug .flex-column Vis flex-elementer lodret (overlappende), eller brug .flex-column-reverse Reversér lodret retning:

Eksempel

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

Prøv det selv

Juster indhold

brug .justify-content-* Klasser kan ændre justeringen af de fleksible elementer. Gyldige klasser er:

  • start（Standard）
  • end
  • center
  • between
  • around

Eksempel

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

Prøv det selv

Ens bredde

brug på fleks projekter .flex-fill Man kan tvunget dem til at være ens bredde:

Eksempel

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

Prøv det selv

Udvide

brug på fleks projekter .flex-grow-1 Kan tage op plads. I nedenstående eksempel tager de to første flex-elementer nødvendig plads, mens den sidste element tager den tilgængelige plads tilbage:

Eksempel

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

Prøv det selv

Tip:brug på fleks projekter .flex-shrink-1 kan gøre det nødvendigt at kontrahere.

Rækkefølge

brug .order klassen kan ændre den visuelle rækkefølge for et specifikt fleks projekt. Gyldige klasser er fra 0 til 5, hvor den laveste nummer har højeste prioritet (order-1 vises før order-2, osv.):

Eksempel

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

Prøv det selv

automatiske marginer

brug .ms-auto（flytter projektet til højre）eller brug .me-auto（flytter projektet til venstre）Det er nemt at tilføje automatisk margin til fleksible projekter:

Eksempel

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

Prøv det selv

Gå til næste række

ved hjælp af .flex-nowrap（standard）、.flex-wrap eller .flex-wrap-reverse，kontrollerer hvordan fleksible projekter pakkes ind i fleks containeren.

Eksempel

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

Prøv det selv

Juster indhold

Brug .align-content-* Kontrollerer den vertikale justering af fleksible projekter. Gyldige klasser er:

  • .start-align-content（Standard）
  • .end-align-content
  • .center-align-content
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

Bemærk:Disse klasser har ingen effekt på en-linje elastiske elementer.

Klik på knappen nedenfor for at se forskellen mellem de fem klasser ved at ændre den vertikale justering af elastiske elementer i eksemplet:

Eksempel

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

Prøv det selv

Juster elementer

Brug .align-items-* Klasser styringEn linjeDen vertikale justering af elastiske elementer. Gyldige klasser er:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch（Standard）

Klik på knappen nedenfor for at se forskellen mellem de fem klasser:

Eksempel

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

Prøv det selv

Selvjustering

Brug .align-self-* Klasser styringAngiv elastiske elementerDen vertikale justering. Gyldige klasser er:

  • .start-self
  • .end-self
  • .center-self
  • .align-self-baseline
  • .stretch-self（Standard）

Klik på knappen nedenfor for at se forskellen mellem de fem klasser:

Eksempel

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

Prøv det selv

Responsiv Flex klasse

Alle elastiske klasser har ekstra responsklasser, hvilket gør det nemt at sætte specifikke flex-klasser på specifikke skærmskalaer.

*-symbolet kan erstattes af sm, md, lg, xl eller xxl, hvilket henholdsvis repræsenterer lille, medium, stor, stor og ekstra stor skærm.

Søg efter specifikke elastiske klasser ..

Klasse Beskrivelse Eksempel
Elastisk kontainer
.d-*-flex Opret flexbox-kontainer for forskellige skærme. Prøv det
.d-*-inline-flex Opret indre flexbox-kontainer for forskellige skærme. Prøv det
Retning
.flex-*-row Vis elastiske elementer vandret på forskellige skærme. Prøv det
.flex-*-row-reverse Vis elastiske elementer vandret og højrejusteret på forskellige skærme. Prøv det
.flex-*-column Vis elastiske elementer lodret på forskellige skærme. Prøv det
.flex-*-column-reverse Vis elastiske elementer lodret i omvendt rækkefølge på forskellige skærme. Prøv det
Indholdet i linjen
.justify-content-*-start Vis elastiske elementer fra begyndelsen (venstrejusteret) på forskellige skærme. Prøv det
.justify-content-*-end Vis elastiske elementer i enden (højrejusteret) på forskellige skærme. Prøv det
.justify-content-*-center Vis elastiske elementer i midten af forskellige skærms' elastiske kontainer. Prøv det
.justify-content-*-between Vis elastiske elementer jævnt på forskellige skærme. Prøv det
.justify-content-*-around Vis elastiske elementer 'omgivet' på forskellige skærme. Prøv det
Fyld / ens bredde
.flex-*-fill Tving elastiske elementer til at have samme bredde på forskellige skærme. Prøv det
Udvid
.flex-*-grow-0 Lad ikke elementer udvide sig på forskellige skærme.
.flex-*-grow-1 Lad elementer udvide sig på forskellige skærme.
Kontraher
.flex-*-shrink-0 Undgå at lade elementer kontrahere på forskellige skærme.
.flex-*-shrink-1 Lad elementer kontrahere på forskellige skærme.
Rækkefølge
.order-*-0-12 Skift rækkefølge fra 0 til 12 på små skærme. Prøv det
Gå til næste række
.flex-*-nowrap Undgå at gå til næste række på forskellige skærme. Prøv det
.flex-*-wrap Gå til næste række på forskellige skærme. Prøv det
.flex-*-wrap-reverse Inverter ruller af elementer på forskellige skærme. Prøv det
Juster indhold
.align-content-*-start Juster fra starten på forskellige skærme. Prøv det
.align-content-*-end Juster i enden på forskellige skærme. Prøv det
.align-content-*-center Juster elementer i midten på forskellige skærme. Prøv det
.align-content-*-around Juster elementer omkring forskellige skærme. Prøv det
.align-content-*-stretch Stræk elementer på forskellige skærme. Prøv det
Juster elementer
.align-items-*-start Juster fra starten på forskellige skærme. Prøv det
.align-items-*-end Juster i enden på forskellige skærme. Prøv det
.align-items-*-center Juster en-linje-elementer i midten på forskellige skærme. Prøv det
.align-items-*-baseline Juster en-linje-elementer på baselines på forskellige skærme. Prøv det
.align-items-*-stretch Stræk en-linje-elementer på forskellige skærme. Prøv det
Juster selv
.align-self-*-start Juster fra starten på forskellige skærme. Prøv det
.align-self-*-end Juster i enden på forskellige skærme. Prøv det
.align-self-*-center Juster fleksible elementer i midten på forskellige skærme. Prøv det
.align-self-*-baseline Juster fleksible elementer på baselines på forskellige skærme. Prøv det
.align-self-*-stretch Stræk fleksible elementer på forskellige skærme. Prøv det