# 15. Flexbox és CSS Grid

2025. november 14. • 25 perc olvasás • HTML5 & CSS3

Ebben a cikkben megismerkedsz a modern CSS layout rendszerekkel: a Flexbox-szal és a CSS Grid-del. Ezek a technikák lehetővé teszik a rugalmas, reszponzív elrendezések készítését.

#### Bónusz anyag

Ez a lecke teljes egészében BÓNUSZ tartalom!

A Flexbox és CSS Grid modern layout rendszerek, amelyek nem szerepelnek az érettségi követelményekben:

- Flexbox: Egydimenziós elrendezés (sor vagy oszlop)
- CSS Grid: Kétdimenziós elrendezés (sorok és oszlopok)

Ezek a technikák hasznosak a modern webfejlesztésben, de az érettségin inline-block és float technikákat kérnek.

## CSS Flexbox - Rugalmas elrendezés BÓNUSZ

A Flexbox (Flexible Box Layout) egy egydimenziós layout rendszer, amely lehetővé teszi az elemek rugalmas elrendezését egy sorban vagy egy oszlopban.

### Flexbox alapok

HTML + CSS - Flexbox alapok
`<!-- HTML --> <div class="flex-container"> <div class="flex-item">Elem 1</div> <div class="flex-item">Elem 2</div> <div class="flex-item">Elem 3</div> </div> <!-- CSS --> <style> .flex-container { display: flex; /* Flexbox aktiválása */ gap: 10px; /* Elemek közötti távolság */ } .flex-item { background: lightblue; padding: 20px; } </style> <!-- Eredmény: 3 elem egymás mellett --> ┌────────┐ ┌────────┐ ┌────────┐ │ Elem 1 │ │ Elem 2 │ │ Elem 3 │ └────────┘ └────────┘ └────────┘`

### Flexbox Container tulajdonságok

Ezeket a tulajdonságokat a szülő elemre (flex container) alkalmazzuk:

CSS - Flex Container tulajdonságok
`.container { display: flex; /* vagy inline-flex */ /* Irány beállítása */ flex-direction: row; /* → vízszintes (alapértelmezett) */ flex-direction: row-reverse; /* ← vízszintes fordított */ flex-direction: column; /* ↓ függőleges */ flex-direction: column-reverse; /* ↑ függőleges fordított */ /* Sortörés engedélyezése */ flex-wrap: nowrap; /* egysorban (alapértelmezett) */ flex-wrap: wrap; /* több sorba törhető */ flex-wrap: wrap-reverse; /* több sorba fordított sorrendben */ /* Vízszintes igazítás (main axis) */ justify-content: flex-start; /* ← balra */ justify-content: flex-end; /* → jobbra */ justify-content: center; /* → középre */ justify-content: space-between; /* széleken nincs tér, közben egyenlő */ justify-content: space-around; /* körben egyenlő tér */ justify-content: space-evenly; /* mindenütt pontosan egyenlő tér */ /* Függőleges igazítás (cross axis) */ align-items: stretch; /* nyújtás (alapértelmezett) */ align-items: flex-start; /* felülre */ align-items: flex-end; /* alulra */ align-items: center; /* középre */ align-items: baseline; /* szöveg alapvonalhoz */ /* Több sor igazítása */ align-content: flex-start; align-content: center; align-content: space-between; /* Elemek közötti távolság */ gap: 20px; /* mindkét irányban */ row-gap: 10px; /* sorok között */ column-gap: 20px; /* oszlopok között */ }`

### Flexbox Item tulajdonságok

Ezeket a tulajdonságokat a gyerek elemekre (flex items) alkalmazzuk:

CSS - Flex Item tulajdonságok
`.item { /* Növekedés (ha van szabad hely) */ flex-grow: 0; /* nem növekszik (alapértelmezett) */ flex-grow: 1; /* arányosan növekszik */ flex-grow: 2; /* dupla arányban növekszik */ /* Zsugorodás (ha nincs elég hely) */ flex-shrink: 1; /* arányosan zsugorodik (alapértelmezett) */ flex-shrink: 0; /* nem zsugorodik */ /* Alapméret */ flex-basis: auto; /* tartalom mérete alapján */ flex-basis: 200px; /* fix szélesség */ flex-basis: 30%; /* százalékos szélesség */ /* Rövidített forma (grow shrink basis) */ flex: 0 1 auto; /* alapértelmezett */ flex: 1; /* = flex: 1 1 0 (rugalmas kitöltés) */ flex: 2; /* = dupla arány */ /* Egyedi igazítás (felülírja az align-items-t) */ align-self: auto; align-self: flex-start; align-self: center; align-self: flex-end; /* Sorrend megváltoztatása */ order: 0; /* alapértelmezett */ order: -1; /* előrébb */ order: 1; /* hátrébb */ }`

### Flexbox gyakorlati példák

Példa 1 - Navbar (menüsáv)
`<!-- HTML --> <nav class="navbar"> <div class="logo">Elit Hardver</div> <ul class="nav-links"> <li><a href="#">Főoldal</a></li> <li><a href="#">Termékek</a></li> <li><a href="#">Kapcsolat</a></li> </ul> </nav> <!-- CSS --> <style> .navbar { display: flex; justify-content: space-between; /* Logó balra, menü jobbra */ align-items: center; /* Függőlegesen középre */ background: #333; padding: 1rem; color: white; } .nav-links { display: flex; gap: 2rem; list-style: none; } </style>`
Példa 2 - Termék kártyák (3 oszlopos grid)
`<!-- HTML --> <div class="termekek"> <div class="termek-kartya">Termék 1</div> <div class="termek-kartya">Termék 2</div> <div class="termek-kartya">Termék 3</div> <div class="termek-kartya">Termék 4</div> </div> <!-- CSS --> <style> .termekek { display: flex; flex-wrap: wrap; /* Több sorba törés engedélyezve */ gap: 20px; } .termek-kartya { flex: 1 1 300px; /* Minimum 300px, rugalmasan növekszik */ /* Eredmény: 3 kártya sorban, ha van hely, különben kevesebb */ background: #f0f0f0; padding: 20px; border-radius: 8px; } </style>`
Példa 3 - Középre igazítás (vertical + horizontal center)
`<!-- HTML --> <div class="center-container"> <div class="centered-box">Középen vagyok!</div> </div> <!-- CSS --> <style> .center-container { display: flex; justify-content: center; /* Vízszintesen középre */ align-items: center; /* Függőlegesen középre */ height: 100vh; /* Teljes viewport magasság */ background: #eee; } .centered-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } </style>`

## CSS Grid - Kétdimenziós elrendezés BÓNUSZ

A CSS Grid egy kétdimenziós layout rendszer, amely lehetővé teszi elemek sorokba ÉS oszlopokba való rendezését egyszerre.

### Grid alapok

HTML + CSS - Grid alapok
`<!-- HTML --> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> <!-- CSS --> <style> .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 egyenlő oszlop */ grid-template-rows: 100px 100px; /* 2 fix magasságú sor */ gap: 10px; } .grid-item { background: lightblue; padding: 20px; } </style> <!-- Eredmény: 3×2 rács (3 oszlop, 2 sor) --> ┌───┐ ┌───┐ ┌───┐ │ 1 │ │ 2 │ │ 3 │ └───┘ └───┘ └───┘ ┌───┐ ┌───┐ ┌───┐ │ 4 │ │ 5 │ │ 6 │ └───┘ └───┘ └───┘`

### Grid Container tulajdonságok

CSS - Grid Container tulajdonságok
`.container { display: grid; /* vagy inline-grid */ /* Oszlopok definiálása */ grid-template-columns: 200px 200px 200px; /* 3× 200px oszlop */ grid-template-columns: 1fr 1fr 1fr; /* 3 egyenlő oszlop */ grid-template-columns: 1fr 2fr 1fr; /* Középső dupla széles */ grid-template-columns: 200px auto 200px; /* Rögzített + rugalmas */ grid-template-columns: repeat(3, 1fr); /* Ismétlés: 3× 1fr */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Reszponzív */ /* Sorok definiálása */ grid-template-rows: 100px 200px 100px; grid-template-rows: repeat(3, 150px); grid-auto-rows: 150px; /* Automatikus sorok magassága */ /* Hézagok (távolságok) */ gap: 20px; /* mindkét irányban */ row-gap: 10px; /* sorok között */ column-gap: 20px; /* oszlopok között */ /* Elemek igazítása (vízszintesen) */ justify-items: start; /* balra */ justify-items: end; /* jobbra */ justify-items: center; /* középre */ justify-items: stretch; /* nyújtás (alapértelmezett) */ /* Elemek igazítása (függőlegesen) */ align-items: start; align-items: end; align-items: center; align-items: stretch; /* Grid igazítása a konténeren belül */ justify-content: start | end | center | space-between | space-around; align-content: start | end | center | space-between | space-around; }`

### Grid Item tulajdonságok

CSS - Grid Item pozicionálás
`.item { /* Oszlop pozíció */ grid-column-start: 1; /* Kezdő oszlop */ grid-column-end: 3; /* Záró oszlop (nem inkluzív) */ grid-column: 1 / 3; /* Rövidített (oszlop 1-2) */ grid-column: 1 / span 2; /* 1. oszloptól 2 oszlop széles */ /* Sor pozíció */ grid-row-start: 1; grid-row-end: 3; grid-row: 1 / 3; /* Sor 1-2 */ grid-row: 1 / span 2; /* 1. sortól 2 sor magas */ /* Rövidített forma (row / column) */ grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */ /* Egyedi igazítás */ justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }`

### Grid gyakorlati példák

Példa 1 - Weboldal layout (header, sidebar, main, footer)
`<!-- HTML --> <div class="page-layout"> <header class="header">Fejléc</header> <aside class="sidebar">Oldalsáv</aside> <main class="main">Fő tartalom</main> <footer class="footer">Lábléc</footer> </div> <!-- CSS --> <style> .page-layout { display: grid; grid-template-columns: 250px 1fr; /* Sidebar 250px, main rugalmas */ grid-template-rows: auto 1fr auto; /* Header/footer auto, main kitölt */ min-height: 100vh; gap: 10px; } .header { grid-column: 1 / 3; /* 2 oszlopon átível (teljes szélesség) */ background: #333; color: white; padding: 1rem; } .sidebar { background: #f0f0f0; padding: 1rem; } .main { background: white; padding: 1rem; } .footer { grid-column: 1 / 3; /* 2 oszlopon átível */ background: #333; color: white; padding: 1rem; } </style> <!-- Eredmény: ┌────────────────────────┐ │ Header │ ← Teljes szélesség ├──────┬─────────────────┤ │Side- │ │ │bar │ Main Content │ ← Sidebar 250px, Main kitölti │ │ │ ├──────┴─────────────────┤ │ Footer │ ← Teljes szélesség └────────────────────────┘ -->`
Példa 2 - Reszponzív termék rács (auto-fit)
`<!-- HTML --> <div class="termek-grid"> <div class="termek">Termék 1</div> <div class="termek">Termék 2</div> <div class="termek">Termék 3</div> <div class="termek">Termék 4</div> <div class="termek">Termék 5</div> <div class="termek">Termék 6</div> </div> <!-- CSS --> <style> .termek-grid { display: grid; /* Automatikusan annyi oszlop, amennyi 250px-nél nem kisebb */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .termek { background: #f5f5f5; padding: 20px; border-radius: 8px; } </style> <!-- Eredmény: Nagy képernyő (1200px+): 4 oszlop Tablet (800px): 3 oszlop Mobil (400px): 1 oszlop Automatikusan alkalmazkodik! -->`
Példa 3 - Blog layout (kiemelt cikk + lista)
`<!-- HTML --> <div class="blog-grid"> <article class="kiemelt">Kiemelt cikk (nagy)</article> <article>Cikk 2</article> <article>Cikk 3</article> <article>Cikk 4</article> <article>Cikk 5</article> </div> <!-- CSS --> <style> .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 oszlop */ grid-auto-rows: 200px; gap: 15px; } .kiemelt { grid-column: 1 / 3; /* 2 oszlop széles */ grid-row: 1 / 3; /* 2 sor magas */ background: #4CAF50; color: white; } article { background: #f0f0f0; padding: 15px; } </style> <!-- Eredmény: ┌─────────────┬─────┐ │ │ 2 │ │ Kiemelt ├─────┤ │ (nagy) │ 3 │ ├──────┬──────┼─────┤ │ 4 │ 5 │ │ └──────┴──────┴─────┘ -->`

## Flexbox vs Grid - Mikor melyiket használd? BÓNUSZ

Szempont | Flexbox | CSS Grid
--- | --- | ---
Dimenziók | Egydimenziós (sor VAGY oszlop) | Kétdimenziós (sorok ÉS oszlopok)
Layout logika | Tartalom → elrendezés | Elrendezés → tartalom
Használat | Komponensek (navbar, kártyák) | Oldal struktúra (layout)
Irány változtatás | Könnyű (flex-direction) | Bonyolultabb
Elem sorrend | Rugalmas (order) | Pontos pozicionálás
Egyszerűség | Könnyebb tanulni | Több lehetőség, komplexebb

#### Használd Flexbox-ot, ha...

- ✅ Navigációs menü: Linkek egymás mellett
- ✅ Gombok csoportja: Egysorban rendezve
- ✅ Kártyák listája: Rugalmasan tördelve
- ✅ Középre igazítás: Egyszerű vertikális/horizontális center
- ✅ Egy irányú elrendezés: Vagy vízszintes, vagy függőleges

#### Használd Grid-et, ha...

- ✅ Oldal layout: Header, sidebar, main, footer
- ✅ Galéria: Képek rácsban, reszponzív oszlopokkal
- ✅ Magazin layout: Bonyolult, átfedő elemek
- ✅ Táblázat-szerű: Sorok és oszlopok egyszerre
- ✅ Komplex elrendezés: Elemek több sort/oszlopot foglalnak

#### Kombinálható! Flexbox ÉS Grid együtt

A legjobb megoldás gyakran a kettő kombinációja:

- Grid: Oldal fő struktúrája (header, main, sidebar, footer)
- Flexbox: Komponenseken belül (navbar linkek, kártya elemek)

## Gyakorlati tippek és legjobb gyakorlatok BÓNUSZ

1. Mobile-first reszponzív design
`<style> /* Alapértelmezett: mobil (1 oszlop) */ .grid { display: grid; grid-template-columns: 1fr; gap: 15px; } /* Tablet (768px+): 2 oszlop */ @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop (1024px+): 3 oszlop */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } </style>`
2. Flexbox fallback régi böngészőkhöz
`<style> .container { /* Fallback float-tal (régi böngészők) */ overflow: auto; } .item { float: left; width: 33.33%; } /* Modern böngészők: Flexbox */ @supports (display: flex) { .container { display: flex; gap: 20px; } .item { float: none; flex: 1; } } </style>`
3. Grid területek névvel (template areas)
`<style> .page { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; grid-template-columns: 200px 1fr 1fr; gap: 10px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } /* Reszponzív: mobilon 1 oszlop */ @media (max-width: 768px) { .page { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; } } </style>`

## Összefoglalás

Ebben a cikkben megismerkedtél a modern webfejlesztés alapelemeivel:

- <div>: Blokk szintű konténer layout és stílusozáshoz
- <span>: Inline konténer szövegrészek kiemeléséhez
- Flexbox: Egydimenziós layout (sor vagy oszlop), komponensekhez
- CSS Grid: Kétdimenziós layout (sorok és oszlopok), oldal struktúrához

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a div, Flexbox és Grid-et a gyakorlatban:

- Főoldal header - Flexbox a navigációs menühöz (display: flex, justify-content)
- Termék kártyák - CSS Grid a termékek elrendezéséhez (grid-template-columns)
- Blog layout - 75/25% elosztás Flexbox-szal a fő tartalom és oldalsáv között
- Alkatrészek - Div konténerek szekciókhoz, Grid és Flexbox kombinációja

#### Következő lépések

Gyakorold az itt tanultakat: készíts egy teljes oldal layoutot Grid-del (header, sidebar, main, footer), majd add hozzá a navigációt Flexbox-szal. Tedd reszponzívvá media queries-ekkel, és teszteld különböző képernyőméreteken!

Gratulálunk! Ezzel befejeztük a teljes HTML5 oktatási sorozatot! Most már birtokában vagy minden alapvető HTML és layout tudásnak professzionális weboldalak készítéséhez. További tanulás: CSS animációk, JavaScript interakciók és reszponzív design haladó technikák. 🎉

#### Böngésző kompatibilitás

- Flexbox: Minden modern böngésző támogatja (IE 11+, Edge, Chrome, Firefox, Safari)
- CSS Grid: Minden modern böngésző támogatja (IE 11 részlegesen, Edge 16+, Chrome 57+, Firefox 52+, Safari 10.1+)
- Tipp: Használd a Can I Use oldalt a részletes kompatibilitás ellenőrzéséhez