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.
Bruk display
verktøy for å lage en flexbox-beholder og forvandle direkte barn-elementer til flex-artikler. Fleksibeholdere og gjenstander kan modifiseres ytterligere med ytterligere flexegenskaper.
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
Responsive variasjoner finnes også for .d-flex
og .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
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-row
for å angi en horisontal retning (nettleserens standard), eller .flex-row-reverse
for å starte den horisontale retningen fra motsatt side.
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Bruk .flex-column
for å angi en vertikal retning, eller .flex-column-reverse
for å starte den vertikale retningen fra motsatt side.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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
Bruk justify-content
verktø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
.
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
Bruk align-items
verktø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).
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
Bruk align-self
verktø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).
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
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.
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
Flytt ett fleksibelt element vertikalt til toppen eller bunnen av en beholder ved å blande align-items
, flex-direction: column
, og margin-top: auto
eller margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>
Endre hvordan flexvarer pakkes inn i en flexbeholder. Velg mellom ingen innpakning i det hele tatt (nettleserens standard) med .flex-nowrap
, innpakning med .flex-wrap
eller omvendt innpakning med .flex-wrap-reverse
.
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
Endre den visuelle rekkefølgen til spesifikke fleksible elementer med en håndfull order
verktøy. Vi tilbyr kun alternativer for å lage en vare først eller sist, samt en tilbakestilling for å bruke DOM-bestillingen. Som order
tar en hvilken som helst heltallsverdi (f.eks. 5
), legg til tilpasset CSS for eventuelle tilleggsverdier som trengs.
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">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
Bruk align-content
verktø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: wrap
og økt antallet fleksible elementer.
Vær oppmerksom! Denne egenskapen har ingen effekt på enkeltrader med fleksible elementer.
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