Source

Flex

Administrer raskt oppsettet, justeringen og størrelsen på rutenettsøyler, navigasjon, komponenter og mer med en full pakke med responsive flexbox-verktøy. For mer komplekse implementeringer kan tilpasset CSS være nødvendig.

Aktiver fleksibel atferd

Bruk displayverktøy for å lage en flexbox-beholder og forvandle direkte barn-elementer til flex-artikler. Fleksibeholdere og gjenstander kan modifiseres ytterligere med ytterligere flexegenskaper.

Jeg er en flexbox-beholder!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Jeg er en inline flexbox-beholder!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Responsive variasjoner finnes også for .d-flexog .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

Retning

Angi retningen til flex-elementer i en flex-beholder med retningsverktøy. I de fleste tilfeller kan du utelate den horisontale klassen her da nettleserens standard er row. Du kan imidlertid støte på situasjoner der du trengte å angi denne verdien eksplisitt (som responsive layouter).

Bruk .flex-rowfor å angi en horisontal retning (nettleserens standard), eller .flex-row-reversefor å starte den horisontale retningen fra motsatt side.

Flex element 1
Flex element 2
Flex element 3
Flex element 1
Flex element 2
Flex element 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Bruk .flex-columnfor å angi en vertikal retning, eller .flex-column-reversefor å starte den vertikale retningen fra motsatt side.

Flex element 1
Flex element 2
Flex element 3
Flex element 1
Flex element 2
Flex element 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Responsive variasjoner finnes også for 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

Begrunn innholdet

Bruk justify-contentverktøy på flexbox-beholdere for å endre justeringen av flex-elementer på hovedaksen (x-aksen for å starte, y-aksen hvis flex-direction: column). Velg mellom start(nettleserstandard), end, center, between, eller around.

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

Responsive variasjoner finnes også for justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Juster elementer

Bruk align-itemsverktøy på flexbox-beholdere for å endre justeringen av flex-elementer på tverraksen (y-aksen for å starte, x-aksen hvis flex-direction: column). Velg mellom start, end, center, baseline, eller stretch(standard nettleser).

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

Responsive variasjoner finnes også for 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

Juster selv

Bruk align-selfverktøy på flexbox-elementer for å individuelt endre justeringen på tverraksen (y-aksen for å starte, x-aksen hvis flex-direction: column). Velg mellom de samme alternativene som align-items: start, end, center, baseline, eller stretch(nettleserstandard).

Flex vare
Justert flex element
Flex vare
Flex vare
Justert flex element
Flex vare
Flex vare
Justert flex element
Flex vare
Flex vare
Justert flex element
Flex vare
Flex vare
Justert flex element
Flex vare
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Responsive variasjoner finnes også for 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

Fylle

Bruk .flex-fillklassen på en serie søskenelementer for å tvinge dem til bredder som tilsvarer innholdet (eller like bredder hvis innholdet ikke overgår grenseboksene deres) mens de tar opp all tilgjengelig horisontal plass.

Flex-vare med mye innhold
Flex vare
Flex vare
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Responsive variasjoner finnes også for flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Vokse og krympe

Bruk .flex-grow-*verktøy for å endre evnen til et fleksibelt element til å vokse for å fylle tilgjengelig plass. I eksemplet nedenfor .flex-grow-1bruker elementene all tilgjengelig plass de kan, samtidig som de tillater de resterende to flex-elementene deres nødvendige plass.

Flex vare
Flex vare
Tredje flex element
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Bruk .flex-shrink-*verktøy for å endre muligheten for en fleksibel gjenstand til å krympe om nødvendig. I eksemplet nedenfor tvinges det andre flexelementet .flex-shrink-1til å pakke innholdet til en ny linje, "krympende" for å gi mer plass til det forrige flexelementet med .w-100.

Flex vare
Flex vare
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Responsive variasjoner finnes også for flex-growog 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

Automatiske marginer

Flexbox kan gjøre noen ganske fantastiske ting når du blander flexjusteringer med automarginer. Nedenfor vises tre eksempler på å kontrollere fleksible elementer via automarginer: standard (ingen automargin), skyve to elementer til høyre ( .mr-auto), og skyve to elementer til venstre ( .ml-auto).

Dessverre støtter ikke IE10 og IE11 automatiske marginer på flex-elementer hvis overordnede har en ikke-standardverdi justify-content. Se dette StackOverflow-svaret for flere detaljer.

Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

Med align-elementer

Flytt ett fleksibelt element vertikalt til toppen eller bunnen av en beholder ved å blande align-items, flex-direction: column, og margin-top: autoeller margin-bottom: auto.

Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
Flex vare
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Pakke inn

Endre hvordan flexvarer pakkes inn i en flexbeholder. Velg mellom ingen innpakning i det hele tatt (nettleserens standard) med .flex-nowrap, innpakning med .flex-wrapeller omvendt innpakning med .flex-wrap-reverse.

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

Responsive variasjoner finnes også for 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

Rekkefølge

Endre den visuelle rekkefølgen til spesifikke fleksible elementer med en håndfull orderverktøy. Vi tilbyr kun alternativer for å lage en vare først eller sist, samt en tilbakestilling for å bruke DOM-bestillingen. Som ordertar en hvilken som helst heltallsverdi (f.eks. 5), legg til tilpasset CSS for eventuelle tilleggsverdier som trengs.

Første flexvare
Andre flex element
Tredje flex element
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Responsive variasjoner finnes også for order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Juster innhold

Bruk align-contentverktøy på flexbox-beholdere for å justere flex-elementer sammen på tverraksen. Velg mellom start(standard nettleser), end, center, between, around, eller stretch. For å demonstrere disse verktøyene har vi håndhevet flex-wrap: wrapog økt antallet fleksible elementer.

Vær oppmerksom! Denne egenskapen har ingen effekt på enkeltrader med fleksible elementer.

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

Responsive variasjoner finnes også for align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch