Source

Flex

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!

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

Jsem inline flexbox kontejner!

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

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

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

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

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

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

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

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

<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

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

Zarovnaná flex položka

Flex položka

Zarovnaná flex položka

Flex položka

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

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

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

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

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-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

Třetí 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>

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

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

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 ( .mr-auto) a posunutí dvou položek doleva ( .ml-auto).

Bohužel, IE10 a IE11 správně nepodporují automatické okraje u flexibilních položek, jejichž nadřazená hodnota nemá výchozí justify-contenthodnotu. Další podrobnosti naleznete v této odpovědi StackOverflow .

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

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

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

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

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

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

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 (např. 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

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

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

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

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

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