3I_WTL_2025/10_flex

10 - Flexbox Layout

🎯 Co se naučíte

V této lekci se naučíte vytvářet moderní layouty pomocí CSS Flexbox.

📚 Témata lekce

• Flexbox základy - display: flex
• Flex container vlastnosti:
  • flex-direction (row, column)
  • justify-content (zarovnání na hlavní ose)
  • align-items (zarovnání na vedlejší ose)
  • flex-wrap (zalamování položek)
  • gap (mezery mezi položkami)
• Flex items vlastnosti:
  • flex-grow, flex-shrink, flex-basis
  • align-self (individuální zarovnání)
• Praktické použití - navigace, karty, layout

📂 Soubory v projektu

• index.html - HTML struktura s flexbox layoutem
• style.css - CSS s flexbox vlastnostmi

💻 Ukázka z lekce

/* Flex container */
.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

/* Flex items */
.main {
    flex: 2;  /* flex-grow: 2 */
}

.aside {
    flex: 1;  /* flex-grow: 1 */
}

/* Navigace s flexbox */
.navigace {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Otevřete Developer Tools (F12) a vyberte flexbox element
3. V Chrome DevTools najdete Flexbox badge - klikněte pro vizualizaci
4. Prozkoumejte style.css - jak funguje display: flex
5. Zkuste měnit flex-direction, justify-content, align-items
6. Změňte velikost okna a sledujte, jak se flex items přizpůsobují

💡 Tip pro studenty

Kdy použít Flexbox:

• ✅ Navigační menu (horizontální nebo vertikální)
• ✅ Karty/produkty vedle sebe
• ✅ Centrování elementů (horizontálně i vertikálně)
• ✅ Jednosměrné layouty (řádek nebo sloupec)

Kdy raději Grid:

• ❌ Komplexní dvourozměrné layouty (řádky + sloupce)
• ❌ Galerie obrázků
• ❌ Celostránkové layouty s header, sidebar, main, footer

Hlavní koncept:

• Flex container = rodič s display: flex
• Flex items = přímé potomci flex containeru

Důležité vlastnosti:

/* Na kontejneru */
display: flex;
justify-content: center;  /* horizontální zarovnání */
align-items: center;      /* vertikální zarovnání */
gap: 20px;                /* mezery mezi položkami */

/* Na položkách */
flex: 1;  /* roztáhne položku */

🎯 Praktické příklady

Centrování:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Horizontální navigace:

nav {
    display: flex;
    justify-content: space-between;
}

Responzivní karty:

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 300px;  /* min šířka 300px */
}

🔗 Související lekce

• Předchozí: 09_mediaquerry - responzivní design
• Další: 11_json - práce s JSON
• Porovnání: 12_grid - CSS Grid (dvourozměrný layout)
• Praktický projekt: AI/ai_04_prep_bootstrap - kombinace Flex a Grid