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 display
usluž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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Odazivne varijacije također postoje za .d-flex
i .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-row
za postavljanje horizontalnog smjera (podrazumevano u pretraživaču) ili .flex-row-reverse
za pokretanje horizontalnog smjera sa suprotne strane.
<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-column
za postavljanje vertikalnog smjera ili .flex-column-reverse
za početak vertikalnog smjera sa suprotne strane.
<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-content
usluž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
, between
ili around
.
<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-items
usluž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č).
<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-self
pomoć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č).
<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-fill
klasu 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.
<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-1
elementi koriste sav raspoloživi prostor koji mogu, dok preostale dvije flex stavke dozvoljavaju njihov neophodan prostor.
<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-1
je prisiljena da omota svoj sadržaj u novi red, "smanjujući" se kako bi omogućila više prostora za prethodnu flex stavku sa .w-100
.
<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-grow
i 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-content
vrijednost koja nije zadana. Pogledajte ovaj StackOverflow odgovor za više detalja.
<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: auto
ili margin-bottom: auto
.
<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-wrap
ili obrnuto prelamanje sa .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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 order
uslužnih programa. Nudimo samo opcije za pravljenje stavke prvi ili zadnji, kao i resetiranje za korištenje DOM reda. Kako order
uzima bilo koju vrijednost cijelog broja (npr. 5
), dodajte prilagođeni CSS za sve potrebne dodatne vrijednosti.
<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-content
pomoć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: wrap
i povećali broj flex stavki.
Glavu gore! Ovo svojstvo nema efekta na pojedinačne redove flex stavki.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch