Source

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

Ja sam flexbox spremnik!

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

Ja sam inline flexbox spremnik!

<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

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-rowza postavljanje vodoravnog smjera (zadani preglednik) ili .flex-row-reverseza početak vodoravnog smjera sa suprotne strane.

Fleksibilna stavka 1

Fleksibilna stavka 2

Fleksibilna stavka 3

Fleksibilna stavka 1

Fleksibilna stavka 2

Fleksibilna 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 okomitog smjera ili .flex-column-reverseza početak okomitog smjera sa suprotne strane.

Fleksibilna stavka 1

Fleksibilna stavka 2

Fleksibilna stavka 3

Fleksibilna stavka 1

Fleksibilna stavka 2

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

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

Flex predmet

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

Flex predmet

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

Flex predmet

Poravnana savitljiva stavka

Flex predmet

Poravnana savitljiva stavka

Flex predmet

Poravnana savitljiva stavka

Flex predmet

Poravnana savitljiva stavka

Flex predmet

Poravnana savitljiva stavka

Flex predmet

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

Flex predmet s puno sadržaja

Flex predmet

<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-1elementi koriste sav raspoloživi prostor koji mogu, dok preostala dva fleksibilna predmeta ostavljaju potreban prostor.

Flex predmet

Treća fleksibilna 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-*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 se" kako bi omogućila više prostora za prethodnu fleksibilnu stavku s .w-100.

Flex predmet

<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

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.

Flex predmet

<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: autoili margin-bottom: auto.

Flex predmet

<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-wrapili obrnutog prelamanja s .flex-wrap-reverse.

Flex predmet

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

Flex predmet

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

Flex predmet

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

Prva fleksibilna stavka

Druga fleksibilna stavka

Treća fleksibilna 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>

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

Flex predmet

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

Flex predmet

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

Flex predmet

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

Flex predmet

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

Flex predmet

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

Flex predmet

<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