Savijati
Brzo upravljajte rasporedom, poravnavanjem i veličinom stupaca rešetke, navigacijom, komponentama i više s punim paketom responzivnih uslužnih programa flexbox. Za složenije implementacije može biti potreban prilagođeni CSS.
Omogući fleksibilna ponašanja
Primijenite display
pomoćne programe za stvaranje flexbox spremnika i transformirajte izravne podređene elemente u flex stavke. Flex spremnici i predmeti mogu se dodatno modificirati dodatnim fleksibilnim 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>
Responzivne 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 savitljivih stavki u savitljivom spremniku pomoću pomoćnih programa za usmjeravanje. U većini slučajeva ovdje možete izostaviti horizontalnu klasu jer je zadana postavka preglednika row
. Međutim, možete se susresti sa situacijama u kojima morate eksplicitno postaviti ovu vrijednost (kao što su responzivni izgledi).
Koristite .flex-row
za postavljanje vodoravnog smjera (zadani preglednik) ili .flex-row-reverse
za početak vodoravnog 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 okomitog smjera ili .flex-column-reverse
za početak okomitog 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>
Responzivne 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
pomoćne programe na flexbox spremnicima za promjenu poravnanja flex stavki na glavnoj osi (x-os za početak, y-os ako je flex-direction: column
). Odaberite start
(zadano u pregledniku), 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>
Responzivne 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
Upotrijebite align-items
pomoćne programe na flexbox spremnicima za promjenu poravnanja flex stavki na poprečnoj osi (y-os za početak, x-os ako je flex-direction: column
). Odaberite između start
, end
, center
, baseline
ili stretch
(zadano u pregledniku).
<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>
Responzivne 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 se
Koristite align-self
pomoćne programe na flexbox stavkama da pojedinačno promijenite njihovo poravnanje na poprečnoj osi (y-os za početak, x-os ako je flex-direction: column
). Odaberite jednu od istih opcija kao align-items
: start
, end
, center
, baseline
, ili stretch
(zadano u pregledniku).
<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>
Responzivne 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
Ispunite
Upotrijebite .flex-fill
klasu na nizu srodnih elemenata kako biste ih prisilili na širine jednake njihovom sadržaju (ili jednake širine ako njihov sadržaj ne premašuje njihove obrube) dok zauzimaju sav raspoloživ vodoravni 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>
Responzivne varijacije također postoje za flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Rasti i smanji se
Upotrijebite .flex-grow-*
pomoćne programe za uključivanje/isključivanje sposobnosti fleksibilne stavke da raste kako bi ispunila raspoloživi prostor. U donjem primjeru, .flex-grow-1
elementi koriste sav raspoloživi prostor koji mogu, dok preostala dva fleksibilna predmeta ostavljaju potreban 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-*
pomoćne programe za uključivanje/isključivanje mogućnosti skupljanja fleksibilne stavke ako je potrebno. U donjem primjeru, druga fleksibilna stavka s .flex-shrink-1
prisiljena je prelomiti svoj sadržaj u novi redak, "skupljajući se" kako bi omogućila više prostora za prethodnu fleksibilnu stavku s .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>
Responzivne 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
Automatske margine
Flexbox može učiniti neke prilično sjajne stvari kada pomiješate savitljiva poravnanja s automatskim marginama. Dolje su prikazana tri primjera upravljanja fleksibilnim stavkama putem automatskih margina: zadana (bez automatske margine), guranje dvije stavke udesno ( .mr-auto
) i guranje dvije stavke ulijevo ( .ml-auto
).
Nažalost, IE10 i IE11 ne podržavaju ispravno automatske margine na fleksibilnim stavkama čiji roditelj ima vrijednost koja nije zadana justify-content
. Pogledajte ovaj StackOverflow odgovor za više pojedinosti.
<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>
S align-items
Okomito pomaknite jednu fleksibilnu 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>
Zamotati
Promijenite način omatanja savitljivih predmeta u savitljivom spremniku. Odaberite bez prelamanja (zadana postavka preglednika) s .flex-nowrap
, prelamanja s .flex-wrap
ili obrnutog prelamanja s .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>
Responzivne 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
Narudžba
Promijenite vizualni redoslijed određenih fleksibilnih stavki s pregršt order
uslužnih programa. Pružamo samo opcije za izradu prve ili zadnje stavke, kao i resetiranje za korištenje DOM redoslijeda. Budući order
da uzima bilo koju cjelobrojnu vrijednost (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>
Responzivne 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
Uskladite sadržaj
Upotrijebite align-content
pomoćne programe na flexbox spremnicima za poravnavanje savitljivih stavki zajedno na poprečnoj osi. Odaberite start
(zadano u pregledniku), end
, center
, between
, around
ili stretch
. Kako bismo demonstrirali te pomoćne programe, nametnuli smo flex-wrap: wrap
i povećali broj fleksibilnih stavki.
Glavu gore! Ovo svojstvo nema učinka na pojedinačne retke fleksibilnih 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>
Responzivne 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