Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch

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 položky 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 bd-highlight">I'm a flexbox container!</div>
Som inline flexbox kontajner!
<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
  • .d-xxl-flex
  • .d-xxl-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 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.

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 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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, between, aroundalebo evenly.

Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
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>
<div class="d-flex justify-content-evenly">...</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-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

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
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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
Flex položka
Zarovnaná flexibilná položka
Flex položka
Flex položka
Zarovnaná flexibilná položka
Flex položka
Flex položka
Zarovnaná flexibilná položka
Flex 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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-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.

Flex položka s množstvom obsahu
Flex položka
Flex položka
<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
  • .flex-xxl-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.

Flex položka
Flex položka
Tretia flexibilná položka
<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.

Flex položka
Flex položka
<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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

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 ( .me-auto) a posunutie dvoch položiek doľava ( .ms-auto).

Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<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="me-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="ms-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.

Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<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.

Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex flex-nowrap">
  ...
</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex flex-wrap">
  ...
</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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 od 0 do 5, pridajte vlastný CSS pre všetky ďalšie potrebné hodnoty.

Prvá flexibilná položka
Druhá flexibilná položka
Tretia flexibilná položka
<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-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Okrem toho existujú aj responzívne .order-firsta .order-lasttriedy, ktoré menia orderelement použitím order: -1a order: 6, resp.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

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
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex align-content-end flex-wrap">...</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex align-content-center flex-wrap">...</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex align-content-between flex-wrap">...</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
<div class="d-flex align-content-around flex-wrap">...</div>
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Mediálny objekt

Chcete replikovať komponent mediálneho objektu z Bootstrap 4? Okamžite ho znova vytvorte pomocou niekoľkých flexibilných nástrojov, ktoré umožňujú ešte väčšiu flexibilitu a prispôsobenie ako predtým.

Placeholder Image
Toto je obsah z mediálneho komponentu. Môžete to nahradiť ľubovoľným obsahom a upraviť podľa potreby.
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

A povedzte, že chcete obsah zvisle vycentrovať vedľa obrázka:

Placeholder Image
Toto je obsah z mediálneho komponentu. Môžete to nahradiť ľubovoľným obsahom a upraviť podľa potreby.
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

Utilities API

Pomôcky Flexbox sú deklarované v našom rozhraní API pre nástroje v scss/_utilities.scss. Zistite, ako používať pomocné rozhranie API.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),