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.
Použijte displaynástroje k vytvoření kontejneru flexbox a transformujte přímé podřízené prvky na flex položky. Flex nádoby a položky lze dále upravovat pomocí další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í 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
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.
<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.
<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
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.
<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
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).
<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
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).
<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
Použijte .flex-filltřídu na sérii sourozeneckých prvků, abyste je přinutili do stejných šířek a zároveň zabrali veškerý dostupný horizontální prostor. Zvláště užitečné pro navigaci se stejnou šířkou nebo zarovnáním.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</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
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.
<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.
<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
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 .
<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>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.
<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>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.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><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
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.
<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
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.
<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>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