Flexbox v CSS: Prvé kroky pri štruktúrovaní tvojej webovej stránky

V tomto návode sa dozvieš, ako v CSS a HTML vytvoriť príkladnú štruktúru pre tvoje webové projekty pomocou Flexbox layoutu. Budeme sa zaoberať integrovanými nástrojmi na ladenie vo Vizuálnom štúdiu Code v spojení s Microsoft Edge a urobíme prvé kroky k aktivácii layoutu Flexbox. Flexbox je výkonný systém layoutu, ktorý ti pomôže vytvárať zložité layouty s minimálnym úsilím a flexibilným poradenstvom prvkov.

Najdôležitejšie poznatky

• S Flexboxom môžeš usporiadať prvky horizontálne aj vertikálne.
• Nástroje pre vývojárov Microsoft Edge je možné priamo integrovať do Vizuálneho štúdia Code.
• Flex-Direction ovplyvňuje zarovnanie prvkov Flex.

Krok za krokom

Najprv v Vizuálnom štúdiu Code nainštaluj nástroje Microsoft Edge. V Extensions vyhľadaj "Nástroje Microsoft Edge pre VS Code" a nainštaluj ich.

Po nainštalovaní rozšírenia musíš prejsť na možnosti ladenia. Klikni na "Spustiť a ladíť" a potom na "vytvoriť súbor launch.json". Toto ti pomôže konfigurovať svoje nastavenia.

V konfiguračnom súbore, ktorý si práve vytvoril, pridaj novú konfiguráciu pre "Nástroje Microsoft Edge". Uistite sa, že ako lokálnu adresu zadaný localhost:3000, pretože v termináli necháme server bežať na tomto porte.

Teraz je čas spustiť svoj projekt. Prejdite do správneho podadresára a vykonajte príkaz npm run dev. Potom otvorte localhost:3000 vo svojom prehliadači.

Po načítaní stránky môžeš aktivovať nástroje pre vývojárov Microsoft Edge kliknutím na príslušné tlačidlo v aplikácii Vizuálne štúdio Code. To spôsobí, že sa Developer Tool otvorí priamo vedľa tvojho editora.

Teraz môžeš vidieť štruktúru svojej aplikácie. Máme kontajner (div), ktorý má triedu "Flex Container". V tomto kontajnéry sú štyri PRVKY DIV, ktoré majú triedu "Flex Child" a zobrazujú textový obsah 1, 2, 3 a 4.

Flex Container je momentálne definovaný len s šírkou 400 pixelov a výškou 200 pixelov, zatiaľ čo Flex Child-j sú definované s šírkou 100 pixelov a výškou 50 pixelov. Aj keď žiadne z detí nie je momentálne usporiadané s Flexboxom, zobrazujú sa vo vertikálnej zozname.

Na aktívne využitie Flexboxu musíte pre kontajner Flex pridať CSS atribút display: flex; a uložiť. Pri tom uvidíte, že usporiadanie detí sa automaticky zmení a teraz sa zobrazujú vedľa seba.

Ak chcete opäť usporiadať Flex Child-y vertikálne, môžete použiť vlastnosť flex-direction. Nastavte flex-direction: column; pre kontajner Flex, aby sa opäť zmenilo zarovnanie Flex Child-y vertikálnym smerom.

Vidíte, že Flex Child-y sú teraz opäť usporiadané vertikálne. Ak zmeníte výšku a šírku, zdá sa, že boli integrované do bloku, hoci display nie je nastavený na block, ale na Flex.

To bol už pohľad na základy layoutu Flexbox. Vo videu sme diskutovali o hlavných vlastnostiach a videli sme ich účinok. V budúcich tutoriáloch budeme skúmať ďalšie funkcie Flexboxu a uvidíme, čo všetko môžeš s týmto mohutným systémom layoutu robiť.

Sumarizácia

V tomto návode si sa naučil, ako naplánovať jednoduchú štruktúru s Flexboxom v CSS. Integroval si nástroje pre vývojárov Microsoft Edge do Vizuálneho štúdia Code a podnikol si prvé kroky k aktivácii layoutu Flex. Pred tebou je ešte veľa možností, ktoré bližšie preskúmame v nasledujúcich videách.