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.
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.
<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>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
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.
<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.
<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
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.
<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
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).
<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
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).
<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
Uporabite .flex-fillrazred na nizu sorodnih elementov, da jih prisilite v enake širine in hkrati zavzamete ves razpoložljivi vodoravni prostor. Še posebej uporabno za navigacijo po enaki širini ali poravnano.
<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>Odzivne različice obstajajo tudi za flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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.
<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.
<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
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 .
<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>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.
<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>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.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><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
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.
<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
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.
<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>Odzivne različice obstajajo tudi 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