Flexbox umiestnenie: Efektívne zoradenie potomkov

V tejto cvičení sa ponoríte hlbšie do vlastností Flexboxu v CSS, špeciálne do distribúcie miesta medzi detskými elementmi vnútri Flex-Containra. Tu sa naučíte, ako upraviť hodnotu Flexu tak, aby určité prvky zaberli viac miesta ako iné. Tento spôsob myslenia si vyžaduje trochu matematiky, ale nemusíte sa obávať - je to jednoduchšie, ako znie!

Spoločne prejdeme jednoduchý príklad, ktorý ukazuje, ako môžete efektívne upraviť rozmiestnenie vašich prvkov pomocou úpravy vlastností Flexu.

Najdôležitejšie zistenia

• Flexbox umožňuje pružné a prispôsobiteľné usporiadanie prvkov.
• Hodnota Flexu je rozhodujúca pri rozdeľovaní miesta medzi detskými prvkami.
• Správnym nastavením hodnôt môžete urobiť niektoré prvky dominantnejšími.

Krok za krokom pokyny

Najprv si pozrieme existujúcu predlohu a pripravíme všetko pre cvičenie.

Máte kontajner, ktorý je už nastavený na zobrazenie: flex. Nastavíme šírku kontajnera na 400 pixelov a výšku na 200 pixelov. Takto môžete prehľadne vidieť prvky.

V kontajneri máme päť divových prvkov, ktoré sú označené triedou Box. Každý z týchto divových prvkov má obrázok okraja, aby ste mohli vidieť hranice, a pozadie, ktoré je šedé.

Úlohou je, že stredový div, teda ten s triedou L3, by mal zaujať polovicu miesta v kontajneri. To zodpovedá 200 pixelom. Ostatné štyri divové prvky by si mali rovnomerne rozdeliť zostávajúcich 200 pixelov.

To znamená, že každý z týchto štyroch divových prvkov potom dostane 50 pixelov (200 pixelov rozdelených 4). Musíte teda správne nastaviť hodnoty Flexu, aby tretí prvok získal viac miesta.

Je čas nastaviť vlastnosti Flex. Najprv nastavíte pre všetky detské prvky okrem stredového hodnotu Flex na 1. Stredný prvok však dostane hodnotu Flex, ktorá mu umožní získať viac miesta. V tomto prípade použijete hodnotu 4.

Po nastavení hodnôt musíte vaše zmeny uložiť a skontrolovať výsledok. Môžete v nástrojoch pre vývojárov vašho prehliadača vidieť, či sa rozloženie takmer rovná vašim predstavám.

Stredový div by teraz mal mať šírku 200 pixelov a zvyšných štyri divové prvky by mali byť každý 50 pixelov široký. Pri výpočte hodnôt Flexu je dôležité udržať súčet hodnôt Flex rovný.

To znamená: Ak sčítate hodnoty Flexu prvých 1, 2, 4 a 5 prvkov (t.j. 1 + 1 + 1 + 1), dostanete 4. Stredový prvok má hodnotu Flex 4 a spolu to dáva celkom 8.

Aby ste pochopili, koľko miesta pridelíte každému elementu, môžete použiť celú šírku kontajnera (400 pixelov). Delenie 8 pre Flexi jednotky znamená, že 1 Flex jednotka je 50 pixelov. Ak rozdelíte 400 pixelov 8, dostanete 50 pixelov pre ostatné štyri elementy a 200 pixelov pre stredový element.

To znamená, že môžete dokonale ovládať rozloženie tým, že upravíte hodnoty Flexu. Vytvoríte tak vyvážený dizajn, ktorý je zároveň prispôsobivý a prehľadný.

Zhrnutie

V tomto cvičení ste sa naučili, ako nastaviť vlastnosti Flexboxu tak, aby detské prvky v kontajneri efektívne využívali miesto. Porozumenie hodnotám Flexu a ich matematickému použitiu vám umožňuje presne určiť, koľko miesta by mal zaujať každý prvok. S týmto spôsobom ste dobre vybavení na vytváranie zložitejších rozložení.