Flexbox Layout: Jak rovnoměrně rozložit dětské prvky

Flexbox je výkonným modul vzhledu v CSS, který vám pomáhá efektivně využít dostupný prostor uvnitř kontejneru. V tomto tutoriálu se naučíte, jak rovnoměrně rozdělit dětské prvky v flexibilním kontejneru. Tato funkce je zvláště užitečná pro responzivní designy, kde se šířka okna může měnit. Pojďme do toho!

Nejdůležitější poznatky

• S Flexboxem lze dětské prvky ve vzhledu rovnoměrně rozdělit nastavením flex hodnot prvků.
• Můžete flexibilně nastavit šířku a výšku dětských prvků, tak aby se automaticky přizpůsobily dostupnému prostoru, aniž byste museli používat pevné rozměry.

Krok za krokem

Pro pochopení, jak rovnoměrně rozdělit dětské prvky v flexibilním kontejneru, postupujte podle těchto kroků:

Nejprve vytvoříte flexibilní kontejner aplikací CSS vlastnosti display: flex;. Zde vidíte jednoduchý příklad, jak na to. Ujistěte se, že je kontejner zarovnán ve formátu řádků:

V tomto stavu je prostor rovnoměrně rozdělen mezi všechny dětské prvky, pokud tyto dětské prvky nemají pevné šířky. Pokud stanovíte šířku dětských prvků a nastavíte ji na 100 pixelů, budou tyto prvky sice rovnoměrně rozděleny v kontejneru, ale to není optimální pro responzivní design:

Pokud odstraníte pevné šířky, rychle uvidíte, že se prostor dramaticky zmenšuje, zejména pokud text v dětských prvcích chybí. V tomto případě se vše zhroutí na minimální šířku definovanou textem:

Abyste prostor rovnoměrně rozdělili, musíte nastavit flex hodnotu pro dětské prvky. To se pohodlně dělá použitím vlastnosti flex, která vám umožňuje definovat proporcionální podíl dostupného prostoru. Nastavte flex hodnotu každého dětského prvku na 1:

Po provedení této úpravy uvidíte, že se všem dětským prvkům rovnoměrně rozdělil prostor. Jedná se o velmi flexibilní řešení, protože se dynamicky přizpůsobuje šířce kontejneru:

Můžete též variabilně nastavit flex hodnoty pro vytvoření různých podílů. Například pokud chcete, aby první prvek získal polovinu místa, můžete mu nastavit flex: 2;, zatímco ostatní prvky ponechat na flex: 1;:

Po úpravě hodnot se dětské prvky rozloží podle zadaných hodnot. Vzhledem k flexibilním účastem, které jste přidělili, první prvek získá více místa než ostatní:

Při změně šířky kontejneru zůstávají poměry stabilní. Bez ohledu na to, zda změníte šířku na 800 pixelů nebo 400 pixelů, dětské prvky se automaticky přizpůsobí a prostor bude rovnoměrně rozdělen na základě předchozích flex hodnot:

Flexbox vlastnosti můžete také snadno upravovat změnou vlastnosti flex-direction. Pokud například změníte flex kontejner z řádku na sloupec, logika rozdělení zůstane stejná. Dětské prvky budou pak uspořádány vertikálně:

Ujistěte se, že nenastavujete pevnou výšku dětských prvků, abyste zachovali flexibilitu. To funguje zvláště dobře pro responzivní designy, protože se dětské prvky přizpůsobí v závislosti na velikosti a orientaci obrazovky:

Tímto způsobem můžete vytvořit silně responzivní rozložení, které zajistí, že se váš design bude skvěle zobrazovat jak na počítači, tak i v mobilním zobrazení.

Shrnutí

V tomto tutoriálu jste se naučili, jak používat Flexbox v CSS a HTML k rovnoměrnému rozmístění dětských prvků. Díky vlastnostem Flex můžete vytvářet responzivní rozložení, která se hladce přizpůsobují různým velikostem a formátům obrazovek.