Testovací layout stránky s využitím flex rozloženia.

Takto dajako by sa dalo spraviť rozloženie stránky pomocou flex inštrukcíí...
Je tu krásne vidno ako flex nezvláda viacriadkový layout - výška tých zelenkavých blokov sa mení ak nie sú vedľa seba. Flex tú výšku drží automaticky rovnakú len pokiaľ sú vedľa seba (ide to nastaviť, ale v základe to takto je). Ak vedľa seba niesú, museli by mať definovanú rovnakú výšku aby to zostalo zachované. Ale občas je to aj takto OK, že vlastne to upraví medzery medzi obsahom v bloku, to záleží na okolnostiach...

Menu:

Hlavný obsah:

Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.
Málokedy sa stáva, že obsah máme pri tvorbe produktu dostupný už v prvej fáze návrhu, preto ho potrebujeme nasimulovať, aby sme vedeli čo najreálnejšie vystihnúť hotový produkt. Zároveň ale nechceme, aby sa čitateľ sústredil na obsah textu, ktorý je len dočasný. Náhodný text Lorem ipsum je v tomto prípade dobrá voľba. Získajte ho týmto jednoduchým generátorom.
Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.
Málokedy sa stáva, že obsah máme pri tvorbe produktu dostupný už v prvej fáze návrhu, preto ho potrebujeme nasimulovať, aby sme vedeli čo najreálnejšie vystihnúť hotový produkt. Zároveň ale nechceme, aby sa čitateľ sústredil na obsah textu, ktorý je len dočasný. Náhodný text Lorem ipsum je v tomto prípade dobrá voľba. Získajte ho týmto jednoduchým generátorom.

Bočný obsah (aside):
Kontakty:

email: test@test.sk
tel: 0901 123 456
Social media:
Facebook
Twitter
Google
Linkedin
YouTube
a ďalšie...

Informačné okienko 1:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas voluptatibus dignissimos incidunt? Veniam, asperiores aspernatur.

Informačné okienko 2:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ducimus? Sint recusandae aliquam corrupti soluta modi officiis cum labore. Consequuntur vel et sapiente eum nesciunt dicta quod voluptatum omnis asperiores.

Bloky textu - články:

justify-content: space-between;
Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.

Bloky textu - články:


avatar Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.

Bloky textu - články:

justify-content: start; (normálne zobrazenie)
Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom. Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.

Bloky textu - články:

avatar Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.

Bloky textu - články:

justify-content: center;
Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom. Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.

Bloky textu - články:

justify-content: space-evenly;
Lorem Ipsum je fiktívny text, ktorý sa používa na vyplnenie obsahu webstránok, tlačových materiálov a iných publikácií s textovým obsahom.