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.
Primijenite displaypomoć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-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
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-rowza postavljanje vodoravnog smjera (zadani preglednik) ili .flex-row-reverseza 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-columnza postavljanje okomitog smjera ili .flex-column-reverseza 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
Koristite justify-contentpomoć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, betweenili 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
Upotrijebite align-itemspomoć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, baselineili 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
Koristite align-selfpomoć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
Upotrijebite .flex-fillklasu na nizu srodnih elemenata kako biste ih prisilili na jednake širine dok zauzimaju sav raspoloživ vodoravni prostor. Osobito korisno za navigaciju jednake širine, ili opravdano.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</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
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-1elementi 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-1prisiljena je prelomiti svoj sadržaj u novi redak, "skupljajući" 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-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
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>Okomito pomaknite jednu fleksibilnu stavku na vrh ili dno spremnika miješanjem align-items, flex-direction: column, i margin-top: autoili 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>Promijenite način omatanja savitljivih predmeta u savitljivom spremniku. Odaberite bez prelamanja (zadana postavka preglednika) s .flex-nowrap, prelamanja s .flex-wrapili 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
Promijenite vizualni redoslijed određenih fleksibilnih stavki s pregršt orderuslužnih programa. Pružamo samo opcije za izradu prve ili zadnje stavke, kao i resetiranje za korištenje DOM redoslijeda. Budući orderda 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
Upotrijebite align-contentpomoćne programe na flexbox spremnicima za poravnavanje savitljivih stavki zajedno na poprečnoj osi. Odaberite start(zadano u pregledniku), end, center, between, aroundili stretch. Kako bismo demonstrirali te pomoćne programe, nametnuli smo flex-wrap: wrapi 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-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