Flex
Rýchlo spravujte rozloženie, zarovnanie a veľkosť stĺpcov mriežky, navigáciu, komponenty a ďalšie pomocou celej sady pomôcok flexbox. Pre zložitejšie implementácie môže byť potrebný vlastný CSS.
Použite displaynástroje na vytvorenie kontajnera flexbox a transformujte priame detské prvky na prvky flex. Flex nádoby a položky je možné ďalej upravovať pomocou ďalších flexibilných vlastností.
<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>Existujú aj responzívne variácie pre .d-flexa .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
Nastavte smer ohybných predmetov v ohybnej nádobe pomocou smerových nástrojov. Vo väčšine prípadov tu môžete vynechať horizontálnu triedu, pretože predvolená hodnota prehliadača je row. Môžete sa však stretnúť so situáciami, keď budete musieť túto hodnotu explicitne nastaviť (napríklad responzívne rozloženia).
Použite .flex-rowna nastavenie vodorovného smeru (predvolené nastavenie prehliadača) alebo .flex-row-reversena začatie vodorovného smeru z opačnej strany.
<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>Použite .flex-columnna nastavenie vertikálneho smeru alebo .flex-column-reversena začatie vertikálneho smeru z opačnej strany.
<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>Existujú aj responzívne variácie pre 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
Použite justify-contentpomocné programy na kontajneroch flexbox na zmenu zarovnania flex položiek na hlavnej osi (os x na začiatok, os y, ak flex-direction: column). Vyberte si z start(predvolený prehliadač), end, center, betweenalebo 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>Existujú aj responzívne variácie pre 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
Použite align-itemspomocné programy na kontajneroch flexbox na zmenu zarovnania flex položiek na priečnej osi (os y na začiatok, os x, ak flex-direction: column). Vyberte si z start, end, center, baselinealebo stretch(predvolené nastavenie prehliadača).
<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>Existujú aj responzívne variácie pre 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
Použite align-selfpomocné programy na položkách flexbox na individuálnu zmenu ich zarovnania na priečnej osi (os y na začiatok, os x, ak flex-direction: column). Vyberte si z rovnakých možností ako align-items: start, end, center, baselinealebo stretch(predvolené nastavenie prehliadača).
<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>Existujú aj responzívne variácie pre 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
Použite .flex-filltriedu na sériu súrodeneckých prvkov, aby ste ich prinútili do rovnakej šírky, pričom zaberú všetok dostupný horizontálny priestor. Obzvlášť užitočné pre navigáciu s rovnakou šírkou alebo odôvodnením.
<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>Existujú aj responzívne variácie pre flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Pomocou .flex-grow-*nástrojov prepínajte schopnosť flexibilnej položky rásť tak, aby zaplnila dostupný priestor. V nižšie uvedenom príklade .flex-grow-1prvky využívajú všetok dostupný priestor, ktorý môžu, zatiaľ čo zvyšným dvom flexibilným prvkom poskytuje potrebný priestor.
<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>Pomocou .flex-shrink-*nástrojov prepínajte schopnosť ohybnej položky zmenšiť sa, ak je to potrebné. V nižšie uvedenom príklade je druhá flexibilná položka s .flex-shrink-1nútená zabaliť svoj obsah do nového riadku a „zmenšiť sa“, aby poskytla viac miesta pre predchádzajúcu flexibilnú položku 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>Existujú aj responzívne variácie pre flex-growa 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 dokáže urobiť niekoľko úžasných vecí, keď skombinujete flexibilné zarovnania s automatickými okrajmi. Nižšie sú uvedené tri príklady ovládania flexibilných položiek pomocou automatických okrajov: predvolené (bez automatického okraja), posunutie dvoch položiek doprava ( .mr-auto) a posunutie dvoch položiek doľava ( .ml-auto).
Bohužiaľ, IE10 a IE11 nepodporujú správne automatické okraje na flexibilných položkách, ktorých rodič nemá predvolenú justify-contenthodnotu. Ďalšie podrobnosti nájdete v tejto odpovedi 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>Vertikálne presuňte jednu flexibilnú položku na vrch alebo spodok nádoby zmiešaním align-items, flex-direction: column, a margin-top: autoalebo 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>Zmeňte spôsob balenia flexibilných predmetov do flexibilného kontajnera. Vyberte si z možností žiadne zalamovanie (predvolené nastavenie prehliadača) s .flex-nowrap, zalamovanie s .flex-wrap, alebo spätné zalamovanie 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>Existujú aj responzívne variácie pre 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
Zmeňte vizuálne poradie konkrétnych flexibilných položiek pomocou niekoľkých ordernástrojov. Poskytujeme iba možnosti pre vytvorenie prvej alebo poslednej položky, ako aj resetovanie na použitie objednávky DOM. Ak orderpotrebujete akúkoľvek celočíselnú hodnotu (napr. 5), pridajte vlastný CSS pre akékoľvek ďalšie potrebné hodnoty.
<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>Existujú aj responzívne variácie pre 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
Na zarovnanie ohybných predmetov na priečnej osi použite align-contentpomôcky na kontajneroch flexbox . Vyberte si z start(predvolený prehliadač), end, center, between, aroundalebo stretch. Na demonštráciu týchto nástrojov sme presadili flex-wrap: wrapa zvýšili počet flexibilných položiek.
Hlavy hore! Táto vlastnosť nemá žiadny vplyv na jednotlivé riadky flexibilných položiek.
<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>Existujú aj responzívne variácie pre 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