Source

Flex

Brzo upravljajte rasporedom, poravnanjem i veličinom kolona mreže, navigacijom, komponentama i još mnogo toga s punim paketom prilagodljivih flexbox uslužnih programa. Za složenije implementacije može biti potreban prilagođeni CSS.

Omogućite fleksibilna ponašanja

Primijenite displayuslužne programe za kreiranje flexbox kontejnera i transformirajte direktne podređene elemente u flex stavke. Flex kontejneri i stavke mogu se dalje modificirati s dodatnim flex svojstvima.

Ja sam flexbox kontejner!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

Ja sam inline flexbox kontejner!

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

Odazivne varijacije također postoje za .d-flexi .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

Smjer

Postavite smjer flex stavki u flex kontejneru s pomoćnim programima za usmjeravanje. U većini slučajeva ovdje možete izostaviti horizontalnu klasu jer je zadana postavka pretraživača row. Međutim, možete naići na situacije u kojima ste trebali eksplicitno postaviti ovu vrijednost (kao što su responzivni izgledi).

Koristite .flex-rowza postavljanje horizontalnog smjera (podrazumevano u pretraživaču) ili .flex-row-reverseza pokretanje horizontalnog smjera sa suprotne strane.

Flex stavka 1

Flex stavka 2

Flex stavka 3

Flex stavka 1

Flex stavka 2

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

Koristite .flex-columnza postavljanje vertikalnog smjera ili .flex-column-reverseza početak vertikalnog smjera sa suprotne strane.

Flex stavka 1

Flex stavka 2

Flex stavka 3

Flex stavka 1

Flex stavka 2

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

Odazivne varijacije također postoje za 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

Opravdajte sadržaj

Koristite justify-contentuslužne programe na flexbox kontejnerima da promijenite poravnanje flex stavki na glavnoj osi (x-osa za početak, y-osa ako je flex-direction: column). Birajte između start(podrazumevano u pretraživaču), end, center, betweenili around.

Flex item

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

Odazivne varijacije također postoje za 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

Poravnajte stavke

Koristite align-itemsuslužne programe na flexbox kontejnerima da promijenite poravnanje flex stavki na poprečnoj osi (y-osa za početak, x-osa ako flex-direction: column). Odaberite između start, end, center, baseline, ili stretch(podrazumevano za pretraživač).

Flex item

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

Odazivne varijacije također postoje za 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

Poravnajte sebe

Koristite align-selfpomoćne programe na flexbox stavkama da pojedinačno promijenite njihovo poravnanje na poprečnoj osi (y-osa za početak, x-osa ako flex-direction: column). Birajte između istih opcija kao align-items: start, end, center, baseline, ili stretch(podrazumevano za pretraživač).

Flex item

Poravnana flex stavka

Flex item

Poravnana flex stavka

Flex item

Poravnana flex stavka

Flex item

Poravnana flex stavka

Flex item

Poravnana flex stavka

Flex item

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

Odazivne varijacije također postoje za 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

Fill

Koristite .flex-fillklasu na nizu srodnih elemenata da ih natjerate na širine jednake njihovom sadržaju (ili jednake širine ako njihov sadržaj ne premašuje njihove granične okvire) dok zauzimaju sav raspoloživ horizontalni prostor.

Flex stavka sa puno sadržaja

Flex item

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

Odazivne varijacije također postoje za flex-fill.

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

Raste i smanjuju se

Koristite .flex-grow-*uslužne programe da biste uključili sposobnost fleksibilne stavke da raste kako bi popunila raspoloživi prostor. U primjeru ispod, .flex-grow-1elementi koriste sav raspoloživi prostor koji mogu, dok preostale dvije flex stavke dozvoljavaju njihov neophodan prostor.

Flex item

Treća flex stavka

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

Upotrijebite .flex-shrink-*uslužne programe da biste uključili mogućnost smanjenja fleksibilne stavke ako je potrebno. U primjeru ispod, druga flex stavka sa .flex-shrink-1je prisiljena da premota svoj sadržaj u novi red, "smanjujući" se kako bi omogućila više prostora za prethodnu flex stavku sa .w-100.

Flex item

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

Odazivne varijacije također postoje za flex-growi 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

Auto margine

Flexbox može učiniti neke prilično sjajne stvari kada pomiješate fleksibilna poravnanja s automatskim marginama. U nastavku su prikazana tri primjera kontrole flex stavki putem automatskih margina: zadano (bez automatske margine), guranje dvije stavke udesno ( .mr-auto) i guranje dvije stavke ulijevo ( .ml-auto).

Nažalost, IE10 i IE11 ne podržavaju pravilno automatske margine na flex stavkama čiji roditelj ima justify-contentvrijednost koja nije zadana. Pogledajte ovaj StackOverflow odgovor za više detalja.

Flex item

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

Sa stavkama za poravnanje

Vertikalno pomjerite jednu flex stavku na vrh ili dno spremnika miješanjem align-items, flex-direction: column, i margin-top: autoili margin-bottom: auto.

Flex item

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

Zamotajte

Promijenite način umotavanja flex stavki u flex kontejner. Izaberite opciju bez prelamanja (podrazumevano u pretraživaču) sa .flex-nowrap, prelamanje sa .flex-wrapili obrnuto prelamanje sa .flex-wrap-reverse.

Flex item

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

Flex item

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

Flex item

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

Odazivne varijacije također postoje za 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

Red

Promijenite vizualni redoslijed određenih flex stavki pomoću nekoliko orderuslužnih programa. Nudimo samo opcije za pravljenje stavke prvi ili zadnji, kao i resetiranje za korištenje DOM reda. Kako orderuzima bilo koju vrijednost cijelog broja (npr. 5), dodajte prilagođeni CSS za sve potrebne dodatne vrijednosti.

Prva flex stavka

Druga flex stavka

Treća flex stavka

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

Odazivne varijacije također postoje za 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

Poravnajte sadržaj

Koristite align-contentpomoćne programe na flexbox kontejnerima da poravnate flex stavke zajedno na poprečnoj osi. Birajte između start(podrazumevano u pretraživaču), end, center, between, around, ili stretch. Da bismo demonstrirali ove uslužne programe, nametnuli smo flex-wrap: wrapi povećali broj flex stavki.

Glavu gore! Ovo svojstvo nema efekta na pojedinačne redove flex stavki.

Flex item

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex item

<div class="d-flex align-content-end flex-wrap">...</div>

Flex item

<div class="d-flex align-content-center flex-wrap">...</div>

Flex item

<div class="d-flex align-content-between flex-wrap">...</div>

Flex item

<div class="d-flex align-content-around flex-wrap">...</div>

Flex item

<div class="d-flex align-content-stretch flex-wrap">...</div>

Odazivne varijacije također postoje za 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