Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check

Rychle spravujte rozvržení, zarovnání a velikost sloupců mřížky, navigaci, komponenty a další pomocí celé sady responzivních nástrojů flexbox. Pro složitější implementace může být nutné vlastní CSS.

Povolit flexibilní chování

Použijte displaynástroje k vytvoření kontejneru flexbox a transformujte přímé podřízené prvky na prvky flex. Flex nádoby a položky lze dále upravovat pomocí dalších flexibilních vlastností.

Jsem flexbox kontejner!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Jsem inline flexbox kontejner!
html
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Existují také responzivní varianty pro .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

Směr

Nastavte směr ohebných předmětů v ohebném kontejneru pomocí směrovacích nástrojů. Ve většině případů zde můžete vynechat horizontální třídu, protože výchozí prohlížeč je row. Můžete se však setkat se situacemi, kdy budete muset tuto hodnotu explicitně nastavit (např. responzivní rozvržení).

Slouží .flex-rowk nastavení vodorovného směru (výchozí nastavení prohlížeče) nebo .flex-row-reversek zahájení vodorovného směru z opačné 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
html
<div class="d-flex flex-row mb-3">
  <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žijte .flex-columnk nastavení vertikálního směru nebo .flex-column-reversek zahájení vertikálního směru z opačné 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
html
<div class="d-flex flex-column mb-3">
  <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>

Responzivní variace existují také pro 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ůvodněte obsah

Pomocí justify-contentnástrojů na kontejnerech flexbox změňte zarovnání prvků flex na hlavní ose (osa x pro začátek, osa y, pokud flex-direction: column). Vyberte si z start(výchozí nastavení prohlížeče), end, center, between, aroundnebo 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>

Responzivní variace existují také pro 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

Zarovnejte položky

Pomocí align-itemsnástrojů na kontejnerech flexbox změňte zarovnání prvků flex na příčné ose (osa y pro začátek, osa x, pokud flex-direction: column). Vyberte si z start, end, center, baselinenebo stretch(výchozí nastavení prohlížeče).

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>

Responzivní variace existují také pro 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

Vyrovnat se

Použijte align-selfnástroje na položkách flexbox k individuální změně jejich zarovnání na příčné ose (osa y pro začátek, osa x, pokud flex-direction: column). Vyberte ze stejných možností jako align-items: start, end, center, baselinenebo stretch(výchozí nastavení prohlížeče).

Flex položka
Zarovnaná flex položka
Flex položka
Flex položka
Zarovnaná flex položka
Flex položka
Flex položka
Zarovnaná flex položka
Flex položka
Flex položka
Zarovnaná flex položka
Flex položka
Flex položka
Zarovnaná flex 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>

Responzivní variace existují také pro 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

Vyplnit

Použijte .flex-filltřídu na sérii sourozeneckých prvků, abyste je vnutili do šířky rovné jejich obsahu (nebo stejné šířky, pokud jejich obsah nepřesahuje jejich hraniční rámečky), přičemž zabere veškerý dostupný horizontální prostor.

Flex položka se spoustou obsahu
Flex položka
Flex položka
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

Responzivní variace existují také pro flex-fill.

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

Růst a zmenšovat se

Pomocí .flex-grow-*nástrojů přepínejte schopnost flexibilní položky růst tak, aby zaplnila dostupný prostor. V níže uvedeném příkladu .flex-grow-1prvky využívají veškerý dostupný prostor, který mohou, zatímco zbývajícím dvěma pružným položkám umožňují jejich potřebný prostor.

Flex položka
Flex položka
Třetí flexibilní položka
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

Pomocí .flex-shrink-*obslužných programů přepínejte schopnost flexibilní položky v případě potřeby zmenšit. V níže uvedeném příkladu je druhá ohebná položka s .flex-shrink-1nucena zabalit svůj obsah do nového řádku a „zmenšit se“, aby poskytla více místa pro předchozí flexibilní položku s .w-100.

Flex položka
Flex položka
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

Existují také responzivní varianty pro 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 může dělat docela úžasné věci, když kombinujete flexibilní zarovnání s automatickými okraji. Níže jsou uvedeny tři příklady ovládání flexibilních položek pomocí automatických okrajů: výchozí (bez automatického okraje), posunutí dvou položek doprava ( .me-auto) a posunutí dvou položek doleva ( .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
html
<div class="d-flex mb-3">
  <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 mb-3">
  <div class="me-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 mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

S align-položkami

Svisle přesuňte jednu ohebnou položku na horní nebo spodní část nádoby smícháním align-items, flex-direction: column, a margin-top: autonebo margin-bottom: auto.

Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
Flex položka
html
<div class="d-flex align-items-start flex-column mb-3" 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 mb-3" 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>

Zabalit

Změňte způsob, jakým se ohebné položky zabalí do ohebného kontejneru. Vyberte si z žádného zalamování (výchozí nastavení prohlížeče) s .flex-nowrap, zalamování s .flex-wrapnebo zpětné zalamování 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>

Responzivní variace existují také pro 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

Objednat

Změňte vizuální pořadí konkrétních flexibilních položek pomocí několika ordernástrojů. Poskytujeme pouze možnosti pro vytvoření položky jako první nebo poslední a také resetování pro použití objednávky DOM. Jako ordervšechny celočíselné hodnoty od 0 do 5 přidejte vlastní CSS pro jakékoli další potřebné hodnoty.

První flexibilní položka
Druhá flex položka
Třetí flexibilní položka
html
<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>

Responzivní variace existují také pro 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

Kromě toho existují také responzivní .order-firsta .order-lasttřídy, které mění 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

Zarovnat obsah

Pomocí align-contentnástrojů na kontejnerech flexbox zarovnejte flex položky dohromady na příčné ose. Vyberte si z start(výchozí nastavení prohlížeče), end, center, between, aroundnebo stretch. Abychom tyto nástroje demonstrovali, prosadili jsme flex-wrap: wrapa zvýšili počet flexibilních položek.

Hlavy vzhůru! Tato vlastnost nemá žádný vliv na jednotlivé řady flexibilních položek.

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>

Responzivní variace existují také pro 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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Mediální objekt

Chcete replikovat komponentu mediálního objektu z Bootstrap 4? Vytvořte jej během okamžiku pomocí několika flexibilních nástrojů, které umožňují ještě větší flexibilitu a přizpůsobení než dříve.

Placeholder Image
Toto je nějaký obsah z mediální komponenty. Tu můžete nahradit libovolným obsahem a upravit podle potřeby.
html
<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 řekněte, že chcete svisle vycentrovat obsah vedle obrázku:

Placeholder Image
Toto je nějaký obsah z mediální komponenty. Tu můžete nahradit libovolným obsahem a upravit podle potřeby.
html
<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

Utility API

Nástroje Flexbox jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss. Naučte se používat rozhraní API utilit.

    "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
    ),
    "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,
      ),
    ),