Source

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 položky je možné ďalej upravovať pomocou ďalších flexibilných vlastností.

Som flexbox kontajner!

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

Som inline flexbox kontajner!

<div class="d-inline-flex p-2">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ť 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.

Flex položka 1

Flex položka 2

Flex položka 3

Flex položka 1

Flex položka 2

Flex položka 3

<div class="d-flex flex-row">
  <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>

Použite .flex-columnna nastavenie vertikálneho smeru alebo .flex-column-reversena začatie vertikálneho smeru z opačnej strany.

Flex položka 1

Flex položka 2

Flex položka 3

Flex položka 1

Flex položka 2

Flex položka 3

<div class="d-flex flex-column">
  <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>

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

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.

Flex položka

<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

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

Flex položka

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

Flex položka

Zarovnaná flexibilná položka

Flex položka

Zarovnaná flexibilná položka

Flex položka

Zarovnaná flexibilná položka

Flex položka

Zarovnaná flexibilná položka

Flex položka

Zarovnaná flexibilná položka

Flex položka

<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

Automatické okraje

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 .

Flex položka

<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">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.

Flex položka

<div class="d-flex align-items-start flex-column" 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" 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>

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.

Flex položka

<div class="d-flex flex-nowrap">
  ...
</div>

Flex položka

<div class="d-flex flex-wrap">
  ...
</div>

Flex položka

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

Prvá flexibilná položka

Druhá flexibilná položka

Tretia flexibilná položka

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

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.

Flex položka

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

Flex položka

<div class="d-flex align-content-end flex-wrap">...</div>

Flex položka

<div class="d-flex align-content-center flex-wrap">...</div>

Flex položka

<div class="d-flex align-content-between flex-wrap">...</div>

Flex položka

<div class="d-flex align-content-around flex-wrap">...</div>

Flex položka

<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