Jak používat Flex, aby byl váš web citlivější

Moderní design webových stránek musí reagovat na změny obsahu nebo velikosti prohlížeče. Můžete toho dosáhnout pomocí vanilla CSS, mediálních dotazů nebo flexboxu.

Některé vlastnosti ohybu, jako je flex-wrap nebo flex-grow, mohou změnit velikost nebo umístění prvku vizuálně přitažlivým způsobem. Tento článek projde příklady, jak můžete použít vlastnosti flex-grow, flex-shrink, flex-wrap, flex-flow a order flex.

Jak nastavit CSS Flex Display

Pokud nejste obeznámeni s základy flexboxu, můžete to prozkoumat Fragment kódu CodePen. Obsahuje ukázkový kód pro jednoduché nastavení flexboxu. Nejprve budete muset zabalit podřízené položky pod nadřazený div nebo "flex kontejner".

<div třída="rodič">
<div třída="podřízená položka"></div>
<div třída="podřízená položka"></div>
<div třída="podřízená položka"></div>
</div>

Přidat displej: flex vlastnictví k nadřazené div.

.rodič {
 displej: flex;
}

Jak pěstovat položky v kontejneru

The flex-grow vlastnost umožňuje podřízeným položkám rozšířit se tak, aby zaplnily prostor dostupný v jejich nadřazeném div. Tato vlastnost vám umožňuje určit "poměr" množství místa, které může každá položka krabice zabírat.

Chcete-li přidat flex-grow, přidejte vlastnost CSS flex-grow ke každé z podřízených položek.

<div třída="rodič">
<div styl="barva pozadí: červená; flex-růst: 1"></div>
<div styl="barva pozadí: oranžová; flex-růst: 1"></div>
<div styl="barva pozadí: žlutá; flex-růst: 1"></div>
<div styl="barva pozadí: zelená; Flex-růst: 3"></div>
<div styl="barva pozadí: modrá; flex-růst: 1"></div>
</div>

.rodič {
 šířka: 500px;
 displej: flex; 
}

Flex-grow 0 pro každou položku znamená, že se krabice nerozšíří, aby zaplnily prostor jejich rodiče. 0 je výchozí hodnota pro tuto vlastnost.

Pružný růst o 1 pro každou položku přinutí všechny krabice, aby se rovnoměrně roztáhly, aby se vešly do dostupného prostoru uvnitř rodiče.

Pokud by jedna z položek měla větší flex růst, například:

<div styl="barva pozadí: zelená; Flex-růst: 3"></div>

Zelené políčko se pokusí získat až trojnásobek prostoru než ostatní políčka.

Podívejte se na kód pro vlastnost flex-grow v tomto Fragment kódu CodePen vidět funkční příklad.

Jak zmenšit položky v kontejneru

V některých případech se může šířka nadřazeného prvku zmenšit a položky uvnitř nadřazeného prvku se již dovnitř nevejdou. Můžete použít flex-shrink vlastnost ke zmenšení velikosti krabic. Tímto způsobem mohou zůstat uvnitř rodiče.

Flex-shrink vám umožňuje určit poměr, o kolik se má každá položka zmenšit.

Přidejte vlastnost flex-shrink do podřízených položek div. Změňte šířku rodiče a potomka tak, aby se položky nevešly do kontejneru.

<div třída="rodič">
<div styl="barva pozadí: červená; flex-smršťovací: 1"></div>
<div styl="barva pozadí: oranžová; flex-smršťovací: 1"></div>
<div styl="barva pozadí: žlutá; flex-smršťovací: 1"></div>
<div styl="barva pozadí: zelená; flex-smršťovací: 2"></div>
<div styl="barva pozadí: modrá; flex-smršťovací: 1"></div>
</div>

.rodič {
 šířka: 500px;
 displej: flex; 
}
.rodič div {
 šířka: 150px;
 výška: 150px;
}

Ohebné smrštění 1 pro všechny položky znamená, že všechny položky se zmenší stejně, pokud se zmenší šířka rodiče.

Pokud by jedna z položek měla větší flex-smršťování, například:

<div styl="barva pozadí: zelená; flex-smršťovací: 2"></div>

Zelený rámeček se pokusí zmenšit dvakrát tolik než ostatní rámečky.

Podívejte se na kód pro vlastnost flex-shrink v tomto Fragment kódu CodePen vidět funkční příklad.

Jak přesunout položky do dalšího řádku

The flex-wrap vlastnost umožňuje přesunout položky na další řádek, pokud se nevejdou do šířky nadřazeného kontejneru. Zde se položky nezmenší a budete moci zachovat výšku a šířku položek.

Možnosti pro vlastnost flex-wrap zahrnují:

flex-wrap: nowrap | obal | wrap-reverse

Přidejte vlastnost flex-wrap do nadřazeného kontejneru flex-container. Ujistěte se, že šířka nádoby je dostatečně malá, aby se do ní nevešly dětské předměty. To vynutí všechny přetékající položky na nový řádek.

<div třída="rodič">
<div třída="Červené"></div>
<div třída="oranžový"></div>
<div třída="žlutá"></div>
<div třída="zelená"></div>
<div třída="modrý"></div>
</div>

.rodič {
 šířka: 300px;
 ohraničení: 1px plná černá;
 displej: flex;
 flex-wrap: zavinovačka;
}
.rodič div {
 šířka: 100px;
 výška: 100px;
}

Hodnota obtékání umístí položky počínaje v pravém horním rohu kontejneru. Hodnota wrap-reverse přemístí položky tak, aby začínaly v pravé dolní části kontejneru. Při zalamování položek posune položky na nový řádek nahoře místo dole.

Pokud u nadřazeného kontejneru určíte výšku, kontejner přidá mezery mezi řádky položek.

Pokud chcete odstranit tyto mezery, ale zachovat výšku nadřazeného prvku div, použijte vlastnost align-content. Zadejte vlastnost align-content jako "flex-start" v nadřazeném div:

.rodič { 
 šířka: 300px; 
 výška: 300px;
 ohraničení: 1px plná černá; 
 displej: flex;
 flex-wrap: zavinovačka; 
 zarovnat-obsah: flex-Start;
}

Vlastnost align-content je jednou z několika základních vlastnosti flexboxu, které vám umožňují řídit zarovnání.

Podívejte se na kód pro vlastnost flex-wrap v tomto Fragment kódu CodePen vidět nějaké příklady.

Jak přesunout položky do dalšího sloupce

Pokud používáte jiné rozvržení (například sloupec) a stále potřebujete prvky zalomit, můžete použít flex-flow vlastnictví. Tato flex vlastnost je kombinací vlastností flex-wrap a flex-direction.

Příklady kombinací možností, které můžete použít pro vlastnost flex-flow, zahrnují:

flex-wrap: row nowrap | sloupec nowrap | zalomení řádků | obal sloupce | řádkové zalomení-zpětně | sloupec zalomit-obrátit

Tato vlastnost funguje podobně jako vlastnost flex-wrap výše. Přidejte flex-flow do mateřské flex nádoby. Ujistěte se, že šířka nadřazeného kontejneru je dostatečně malá, aby přinutila podřízené položky zabalit:

.rodič {
 šířka: 300px; 
 ohraničení: 1px plná černá; 
 displej: flex; 
 flex-flow: obal kolony;
}
.rodič div {
 šířka: 100px;
 výška: 100px;
}

Položky se zalomí v určeném směru (řádek nebo sloupec).

Podívejte se na kód pro vlastnost flex-flow v tomto Fragment kódu CodePen vidět nějaké příklady.

Jak změnit pořadí položek

Pokud jste potřebovali znovu uspořádat položky na stránce kvůli jakémukoli druhu dynamických dat, můžete použít objednat flex vlastnost. Tato vlastnost vám umožňuje určit pořadí, ve kterém se budou jednotlivé položky zobrazovat.

Čísla nemusí nutně začínat od 1. Můžete použít libovolná čísla a intervaly a vlastnost order seřadí prvky HTML od nejnižšího po nejvyšší.

Přidejte vlastnost objednávky ke každé z položek v nadřazeném flex kontejneru:

<div třída="rodič">
<div třída="Červené" styl="objednávka: 2"></div>
<div třída="oranžový" styl="objednávka: 1"></div>
<div třída="žlutá" styl="pořadí: 5"></div>
<div třída="zelená" styl="objednávka: 4"></div>
<div třída="modrý" styl="objednávka: 3"></div>
</div>

V tomto případě bude oranžové pole úplně vpravo, následované červeným, modrým, zeleným a žlutým rámečkem.

Zde si prohlédněte kód vlastnosti objednávky Fragment kódu CodePen vidět nějaké příklady.

Experimentujte s více vlastnostmi CSS na vašem webu

Pomocí těchto flexibilních vlastností můžete zvýšit odezvu svého webu. To zahrnuje použití vlastností flex-grow, flex-shrink, flex-wrap, flex-flow a order flex.

Můžete se také dozvědět o dalších vlastnostech flex, které vám pomohou zarovnat prvky HTML na vašem webu.

Jak používat Flex k zarovnání prvků HTML

Přečtěte si další

O autorovi