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.

Povoliť flexibilné správanie

Použite displaynástroje na vytvorenie kontajnera flexbox a transformujte priame detské prvky na prvky flex. Flex nádoby a predmety 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

Smer

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ť explicitne nastaviť túto hodnotu (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

Zdôvodnite obsah

Pomocou justify-contentnástrojov na kontajneroch flexbox zmeňte zarovnanie položiek flex 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

Zarovnajte položky

Pomocou align-itemsnástrojov na kontajneroch flexbox zmeňte zarovnanie ohybných 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

Zosúladiť seba

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

Vyplňte

Použite .flex-filltriedu na sérii súrodeneckých prvkov, aby ste ich vnútili do šírky rovnajúcej sa ich obsahu (alebo rovnakej šírky, ak ich obsah nepresahuje ich hraničné rámčeky), pričom zaberá všetok dostupný horizontálny priestor.

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

Existujú aj responzívne variácie pre flex-fill.

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

Rast a zmenšovanie

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

Automatické okraje

Flexbox dokáže urobiť niekoľko úžasných vecí, keď kombinujete 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>

S align-položkami

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>

Zabaliť

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

objednať

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

Zarovnajte obsah

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