Odstup a Flexbox: Použití vlastnosti Gap je tak snadné

Při vývoji webových stránek má rozložení velký význam pro vytváření atraktivních a uživatelsky přívětivých webových stránek. Často používaným nástrojem pro rozložení je Flexbox, který vám umožňuje pružně a responsivně uspořádat prvky. Často jsou však mezi prvky nutné mezery, aby byla vytvořena jasná a příjemná struktura. Zde vstupuje do hry vlastnost gap v CSS, která zejména v Flexbox rozložení poskytuje elegantní řešení pro problém mezer. V tutoriálu vám ukážu, jak efektivně použít vlastnost gap.

Nejdůležitější poznatky

• Vlastnost gap vám umožňuje definovat mezery mezi potomky v flex kontejneru.
• gap je jednodušší a efektivnější než použití margin.
• Gap můžete použít nezávisle na hodnotách paddingu prvků kontejneru, abyste získali čisté rozložení.

Krok za krokem průvodce

1. Vytvoření základního Flexbox rozložení

Nejprve musíte vytvořit jednoduché Flexbox rozložení s třemi prvky. Definujte kontejner a nastavte display: flex; k aktivaci Flexboxu.

Zde máme naše tři flexibilní boxy uspořádané v řadě. První a třetí prvek mají stejnou základní velikost, zatímco střední prvek zabírá dostupný prostor.

2. Aktivace flex-grow pro střední prvek

Aby bylo zajištěno, že střední prvek zabere více místa, nastavíme pro tento prvek vlastnost flex-grow na 1, zatímco oba zbývající prvky mají základní velikost 100.

Pokud nyní změníte šířku rozložení, uvidíte, že se střední prvek přizpůsobuje, zatímco vnější prvky zůstávají konstantní.

3. Přidání mezery mezi prvky

V současné době nemají naše boxy žádné mezery mezi sebou. Abyste to vypadalo hezky, chcete přidat mezeru mezi prvky. Můžete použít margin, ale to rychle vede k problémům, zejména při manipulaci s posledním prvkem.

Je obvyklé použít hodnotu margin-right 8px pro všechny boxy. Bohužel to vede k tomu, že i poslední prvek má dodatečný odstup.

4. Odstranění marginu pro poslední prvek

Pokud používáte margin-right u každého prvku, je třeba jej pro poslední prvek znovu nastavit na 0, což může být zdlouhavé. Přístup k vytváření mezer pomocí marginu tedy není optimální.

V tomto bodě je zřejmé, že použití gap je mnohem elegantnější.

5. Zavedení vlastnosti Gap

K zlepšení výše popsané situace můžete použít vlastnost gap. Nastavte gap: 8px; pro váš Flex kontejner. Tento jednoduchý CSS automaticky vytvoří požadovaný odstup mezi potomky.

Výhodou gap je, že už nemusíte spravovat margíny pro poslední prvek. Odstup je aplikován rovnoměrně všude.

6. Přidání paddingu

Kromě mezer mezi prvky pravděpodobně budete chtít definovat vnější odstup kolem kontejneru. K tomu můžete použít padding.

Pokud použijete padding: 10px;, získáte rovnoměrný odstup kolem celé Flexbox.

7. Testování rozložení

Nyní, když jste nastavili hodnoty gap a padding, měli byste otestovat své rozložení tím, že změníte šířku kontejneru. Zjistíte, že mezery mezi prvky zůstávají konstantní, nezávisle na velikosti kontejneru.

Rozložení je nyní dobře strukturované a vizuálně přitažlivé.

8. Využití developerovských nástrojů

Pro lepší pochopení a vizualizaci mezer může být užitečné použít vývojářské nástroje ve vašem prohlížeči. Zde můžete vidět nastavení mezery a zajistit, že vše funguje, jak očekáváte.

Když najedete na Flex kontejner, uvidíte označené oblasti, které reprezentují mezeru prostřednictvím vlastnosti gap.

Shrnutí

S vlastností gap ve Flexboxovém rozložení můžete elegantně a efektivně nastavit mezery mezi potomky, aniž byste museli používat zdlouhavá pravidla margin. Jejich použití pomáhá zajistit čisté a pořádné rozložení.