Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
Check
in English

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!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Ja sam inline flexbox spremnik!
html
<div class="d-inline-flex p-2">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
  • .d-xxl-flex
  • .d-xxl-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
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, between, aroundili evenly.

Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
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>
<div class="d-flex justify-content-evenly">...</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-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

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
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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
Flex predmet
Poravnana savitljiva stavka
Flex predmet
Flex predmet
Poravnana savitljiva stavka
Flex predmet
Flex predmet
Poravnana savitljiva stavka
Flex predmet
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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-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
Flex predmet
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
  • .flex-xxl-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
Flex predmet
Treća fleksibilna stavka
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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
Flex predmet
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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 ( .me-auto) i guranje dvije stavke ulijevo ( .ms-auto).

Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex flex-nowrap">
  ...
</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex flex-wrap">
  ...
</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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 od 0 do 5, dodajte prilagođeni CSS za sve potrebne dodatne vrijednosti.

Prva fleksibilna stavka
Druga fleksibilna stavka
Treća fleksibilna stavka
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Osim toga, postoje i responsive .order-firsti .order-lastklase koje mijenjaju orderelement primjenom order: -1i order: 6, respektivno.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

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
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex align-content-end flex-wrap">...</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex align-content-center flex-wrap">...</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex align-content-between flex-wrap">...</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
<div class="d-flex align-content-around flex-wrap">...</div>
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
Flex predmet
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-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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Medijski objekt

Želite replicirati komponentu medijskog objekta iz Bootstrapa 4? Ponovno ga stvorite u tren oka s nekoliko flex uslužnih programa koji omogućuju još veću fleksibilnost i prilagodbu nego prije.

Placeholder Image
Ovo je dio sadržaja iz medijske komponente. To možete zamijeniti bilo kojim sadržajem i prilagoditi ga po potrebi.
html
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

I recimo da želite okomito centrirati sadržaj pored slike:

Placeholder Image
Ovo je dio sadržaja iz medijske komponente. To možete zamijeniti bilo kojim sadržajem i prilagoditi ga po potrebi.
html
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

API za pomoćne programe

Pomoćni programi Flexboxa navedeni su u našem API-ju za pomoćne programe u scss/_utilities.scss. Naučite kako koristiti API uslužnih programa.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),