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