# 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

```css
/* 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:
```css
/* 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í:**
```css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
```

**Horizontální navigace:**
```css
nav {
    display: flex;
    justify-content: space-between;
}
```

**Responzivní karty:**
```css
.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_extra_material/ai_04_prep_bootstrap - kombinace Flex a Grid