in English

Flex

Hitro upravljajte postavitev, poravnavo in velikost mrežnih stolpcev, navigacijo, komponente in več s polno zbirko odzivnih pripomočkov flexbox. Za bolj zapletene izvedbe bo morda potreben CSS po meri.

Omogoči prilagodljiva vedenja

Uporabite displaypripomočke za ustvarjanje vsebnika flexbox in preoblikovanje neposrednih podrejenih elementov v elemente flex. Flex vsebnike in predmete je mogoče dodatno spreminjati z dodatnimi lastnostmi flex.

Jaz sem flexbox posoda!

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

Sem inline flexbox kontejner!

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

Obstajajo tudi odzivne različice za .d-flexin .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

Smer

Nastavite smer elementov flex v vsebniku flex s pripomočki za usmerjanje. V večini primerov lahko vodoravni razred tukaj izpustite, saj je brskalnik privzeto nastavljen row. Vendar pa lahko naletite na situacije, ko morate izrecno nastaviti to vrednost (kot so odzivne postavitve).

Uporabite .flex-rowza nastavitev vodoravne smeri (privzeta nastavitev brskalnika) ali .flex-row-reverseza začetek vodoravne smeri z nasprotne strani.

Flex element 1

Flex element 2

Flex predmet 3

Flex element 1

Flex element 2

Flex predmet 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>

Uporabite .flex-columnza nastavitev navpične smeri ali .flex-column-reverseza začetek navpične smeri z nasprotne strani.

Flex element 1

Flex element 2

Flex predmet 3

Flex element 1

Flex element 2

Flex predmet 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>

Odzivne različice obstajajo tudi 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

Utemelji vsebino

Uporabite justify-contentpripomočke na vsebnikih flexbox, da spremenite poravnavo elementov flex na glavni osi (os x za začetek, os y, če flex-direction: column). Izberite med start(privzeto v brskalniku), end, center, betweenali 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>

Odzivne različice obstajajo tudi 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 elemente

Uporabite align-itemspripomočke na vsebnikih flexbox, da spremenite poravnavo elementov flex na prečni osi (os y za začetek, os x, če flex-direction: column). Izberite med start, end, center, baselineali stretch(privzeto v brskalniku).

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>

Odzivne različice obstajajo tudi 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

Uporabite align-selfpripomočke na elementih flexbox, da posamezno spremenite njihovo poravnavo na prečni osi (os y za začetek, os x, če flex-direction: column). Izberite med enakimi možnostmi kot align-items: start, end, center, baseline, ali stretch(privzeto v brskalniku).

Flex predmet

Poravnan flex element

Flex predmet

Poravnan flex element

Flex predmet

Poravnan flex element

Flex predmet

Poravnan flex element

Flex predmet

Poravnan flex element

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>

Odzivne različice obstajajo tudi 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

Izpolnite

Uporabite .flex-fillrazred na nizu sorodnih elementov, da jih prisilite v širine, ki so enake njihovi vsebini (ali enake širine, če njihova vsebina ne presega njihovih obrobnih polj), hkrati pa zavzamejo ves razpoložljivi vodoravni prostor.

Flex predmet z veliko vsebine

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>

Odzivne različice obstajajo tudi za flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

Rasti in se krči

Uporabite .flex-grow-*pripomočke za preklop zmožnosti elementa flex, da raste, da zapolni razpoložljivi prostor. V spodnjem primeru .flex-grow-1elementi uporabijo ves razpoložljivi prostor, ki ga lahko, medtem ko preostalima dvema prilagodljivima elementoma omogočijo potreben prostor.

Flex predmet

Tretji fleksibilni element

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

Uporabite .flex-shrink-*pripomočke za preklop zmožnosti elementa flex, da se po potrebi skrči. V spodnjem primeru je drugi gibljivi element z .flex-shrink-1prisiljen zaviti svojo vsebino v novo vrstico in se »skrči«, da omogoči več prostora za prejšnji gibljivi element z .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>

Obstajajo tudi odzivne različice za flex-growin 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

Samodejne marže

Flexbox lahko naredi nekaj precej osupljivih stvari, ko mešate upogibne poravnave s samodejnimi robovi. Spodaj so prikazani trije primeri nadzora prilagodljivih elementov prek samodejnih robov: privzeto (brez samodejnega roba), potiskanje dveh elementov v desno ( .mr-auto) in potiskanje dveh elementov v levo ( .ml-auto).

Na žalost IE10 in IE11 ne podpirata pravilno samodejnih robov na elementih flex, katerih nadrejena justify-contentvrednost ni privzeta. Za več podrobnosti glejte ta odgovor StackOverflow .

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>

Z align-items

Navpično premaknite en upogljivi predmet na vrh ali dno posode z mešanjem align-items, flex-direction: columnin margin-top: autoali 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>

Ovitek

Spremenite način zavijanja predmetov flex v vsebniku flex. Izbirate lahko med nikakršnim prelivanjem (privzeto v brskalniku) z .flex-nowrap, prelivanjem z .flex-wrapali obratnim prelivanjem z .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>

Odzivne različice obstajajo tudi 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

naročilo

Spremenite vizualni vrstni red določenih elementov flex s peščico orderpripomočkov. Nudimo samo možnosti za izdelavo elementa prvega ali zadnjega ter ponastavitev za uporabo vrstnega reda DOM. Ker ordersprejme katero koli celoštevilsko vrednost (npr. 5), dodajte CSS po meri za vse potrebne dodatne vrednosti.

Prvi fleksibilni element

Drugi fleksibilni element

Tretji fleksibilni element

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

Odzivne različice obstajajo tudi 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 vsebino

Uporabite align-contentpripomočke na vsebnikih flexbox, da poravnate elemente flex skupaj na prečni osi. Izberite med start(privzeto v brskalniku), end, center, between, aroundali stretch. Za predstavitev teh pripomočkov smo uveljavili flex-wrap: wrapin povečali število prilagodljivih elementov.

Glavo pokonci! Ta lastnost ne vpliva na posamezne vrstice prilagodljivih elementov.

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>

Odzivne različice obstajajo tudi 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