Flexbox v CSS: První kroky k uspořádání tvých webových stránek

V tomto návodu se dozvíš, jak v Flexbox-layoutu v CSS a HTML vytvořit vzorovou strukturu pro své webové projekty. Zaměříme se na vestavěné nástroje pro ladení ve Visual Studio Code ve spojení s Microsoft Edge a podnikneme první kroky k aktivaci Flexbox-layoutu. Flexbox je výkonný systém layoutu, který ti pomáhá vytvářet složité uspořádání prvků s minimálním úsilím a flexibilním uspořádáním.

Nejdůležitější poznatky

• S Flexboxem můžeš uspořádat prvky horizontálně i vertikálně.
• Nástroje pro vývojáře Microsoft Edge lze přímo integrovat do Visual Studio Code.
• Flex-Direction ovlivňuje uspořádání prvků Flexu.

Krok za krokem návod

Nejprve v Visual Studio Code nainstaluješ nástroje pro Microsoft Edge. V Extensions vyhledáš „Microsoft Edge Tools for VS Code“ a nainstaluješ je.

Po nainstalování rozšíření se přesunuješ do možností ladění. Klepneš na „Spustit a ladit“ a poté na „vytvoření souboru launch.json“. Toto ti pomůže konfigurovat tvá nastavení.

V konfiguračním souboru, který byl nyní vytvořen, přidej novou konfiguraci pro „Microsoft Edge Tools“. Ujisti se, že jako lokální adresu zadeješ localhost:3000, protože server necháme běžet na tomto portu v našem terminálu.

Nyní je čas spustit svůj projekt. Přepneš se do správné podsložky a spustíš příkaz npm run dev. Poté otevřeš localhost:3000 ve svém prohlížeči.

Po načtení stránky můžeš aktivovat nástroje pro vývojáře Microsoft Edge klepnutím na příslušné tlačítko ve Visual Studio Code. Tím se otevře nástroj pro vývojáře přímo vedle tvého editoru.

Nyní můžeš vidět strukturu své aplikace. Máme kontejner (div), který má třídu „Flex Container“. Uvnitř tohoto kontejneru jsou čtyři prvkové DIVy, které mají třídu „Flex Child“ a zobrazují texty 1, 2, 3 a 4.

Flex Container je momentálně definován pouze s šířkou 400 pixelů a výškou 200 pixelů, zatímco Flex Child je definován s šířkou 100 pixelů a výškou 50 pixelů. I když žádné z dětí není momentálně uspořádáno pomocí Flexboxu, zobrazují se ve vertikálním seznamu.

Abychom mohli Flexbox aktivně využít, musíš pro Flex Container přidat CSS atribut display: flex; a uložit změny. Když to uděláš, uvidíš, že se uspořádání dětí automaticky změní a nyní se zobrazují vedle sebe.

Pokud chceš děti Flex znovu uspořádat vertikálně, můžeš použít vlastnost flex-direction. Nastav flex-direction: column; pro Flex Container a změníš tak orientaci Flex Children zpět na vertikální.

Uvidíš, že se Flex Children nyní znovu uspořádají vertikálně. Když nyní upravíš výšku a šířku, zdá se, že jsou integrovány do jednoho bloku, i když není nastaven display na Block, ale na Flex.

To byl krátký přehled základů Flexbox-layoutu. Ve videu jsme si rozebrali klíčové vlastnosti a viděli jsme jejich dopad. V budoucích návodech prozkoumáme další funkce Flexboxu a uvidíme, co všechno dokáže tento silný layout systém.

Shrnutí

V tomto návodu jsi se naučil(a), jak vytvořit jednoduchou strukturu s Flexboxem v CSS. Integroval(a) jsi nástroje pro vývojáře Microsoft Edge do Visual Studio Code a podnikl(a) první kroky k aktivaci Flex-layoutu. Před tebou leží mnoho možností, které budeme blíže zkoumat v dalších videích.