CSS Flexbox

CSS Flexbox: Rugalmas Elrendezés Egyszerűen

A CSS Flexbox egy hatékony elrendezési modell, amely segít a HTML elemek rugalmas és dinamikus igazításában. Kiválóan alkalmas a modern weboldalak komponenseinek elhelyezésére, különösen akkor, ha a tartalom mérete változó.

1. Flexbox Alapjai

A Flexbox egy olyan elrendezési modell, amely lehetővé teszi az elemek igazítását egy szülő konténeren belül. Két fő eleme van:

  • Flex konténer: Ez az az elem, amely tartalmazza a rugalmas elemeket.

  • Flex elemek: A konténerben elhelyezkedő elemek, amelyek igazodnak a megadott szabályok szerint.

Egy elemet flex konténerré alakíthatunk a display: flex; tulajdonság beállításával.

.container {
  display: flex;
}

2. Főtengely és Melléktengely

A Flexbox egyik legfontosabb koncepciója a tengelyrendszer:

  • Főtengely (main axis): Az a tengely, amely mentén az elemek alapértelmezés szerint igazodnak.

  • Melléktengely (cross axis): A főtengelyre merőleges tengely.

Az alapértelmezett irány vízszintes (balról jobbra), de ez módosítható a flex-direction tulajdonsággal.

.container {
  display: flex;
  flex-direction: row; /* vagy column, row-reverse, column-reverse */
}

3. Főbb Flexbox Tulajdonságok

3.1. justify-content

A főtengely mentén történő igazítást szabályozza:

.container {
  justify-content: flex-start; /* balra rendezés (alapértelmezett) */
  justify-content: flex-end; /* jobbra rendezés */
  justify-content: center; /* középre igazítás */
  justify-content: space-between; /* egyenlő térköz az elemek között */
  justify-content: space-around; /* térköz az elemek körül */
}

3.2. align-items

A melléktengely menti igazítást határozza meg:

.container {
  align-items: flex-start; /* a konténer tetején */
  align-items: flex-end; /* a konténer alján */
  align-items: center; /* függőlegesen középen */
  align-items: stretch; /* a konténer magasságát kitöltik (ha nincs magasságuk) */
}

3.3. flex-wrap

Az alapértelmezett viselkedés szerint az elemek egy sorban maradnak, de ezt módosíthatjuk:

.container {
  flex-wrap: nowrap; /* egy sorban tartja az elemeket (alapértelmezett) */
  flex-wrap: wrap; /* szükség esetén új sorba tör */
  flex-wrap: wrap-reverse; /* fordított sorrendben tör új sorba */
}

3.4. align-content

Ha az elemek több sorban helyezkednek el, ez a tulajdonság a sorok közötti igazítást határozza meg.

.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

3.5. Egyedi Flex Tulajdonságok az Elemekre

Az egyes flex elemekhez is beállíthatunk egyedi méretezési szabályokat:

  • flex-grow: Meghatározza, hogy egy elem mennyire nőhet a rendelkezésre álló térben.

  • flex-shrink: Meghatározza, hogy egy elem mennyire zsugorodhat, ha nincs elég hely.

  • flex-basis: Az alapértelmezett méretet adja meg, mielőtt a méretezési szabályok érvénybe lépnek.

.item {
  flex-grow: 1; /* Az elem kitölti a rendelkezésre álló helyet */
  flex-shrink: 0; /* Az elem nem zsugorodik */
  flex-basis: 100px; /* Alapértelmezett szélesség 100px */
}

Összegzés

A Flexbox segítségével könnyen létrehozhatunk dinamikus és rugalmas elrendezéseket anélkül, hogy bonyolult lebegtetéseket (float) vagy táblázatokat használnánk. Az alapvető tulajdonságok és az irányok megértésével gyorsan elsajátítható ez a hatékony elrendezési modell.

Ha modern, reszponzív weboldalt szeretnél készíteni, a Flexbox az egyik legjobb választás!

Comments

Post a Comment

Popular posts from this blog

RxJS Operátorok

RxJS Operátorok: concatMap, mergeMap, switchMap, exhaustMap Az RxJS egyik legfontosabb funkciója az operátorok használata, amelyek lehetővé teszik az Observable-ek átalakítását és kezelését. Ebben a cikkben a concatMap , mergeMap , switchMap és exhaustMap operátorokat vizsgáljuk meg, és mindegyikhez mutatunk egy egyszerű, futtatható példát. 1. concatMap A concatMap sorban hajtja végre a belső Observable-eket. Amíg egy belső Observable nem fejeződik be, nem kezdi el a következő hívást. Használat: Jó választás, ha a műveleteket sorban szeretnénk végrehajtani. Megőrzi az események sorrendjét. Példa: import { of, interval } from 'rxjs'; import { concatMap, take } from 'rxjs/operators'; of(1, 2, 3).pipe( concatMap(value => interval(1000).pipe(take(2))) ).subscribe(console.log); Kimenet (időben): 0 1 0 1 0 1 (2 másodpercenként új szám indul) 2. mergeMap A mergeMap párhuzamosan futtatja a belső Observable-eket, tehát azonnal indít egy új Observable-t, amint érkezik...
Read more

Bevezetés az NgRx-be

Bevezetés az NgRx-be – Állapotkezelés Angularban Az NgRx egy Redux-alapú állapotkezelő könyvtár Angular alkalmazásokhoz. Segít az alkalmazás állapotát egy központi helyen tárolni, ezáltal könnyebben kezelhetővé és előrejelezhetővé válik az állapotváltozás. Az NgRx főbb elemei 1. Store (Állapottár) A Store egy központi adattár, amely az alkalmazás állapotát tartalmazza. Az állapot csak egy módon módosulhat: actionökön (akciókon) keresztül. import { createFeature, createReducer, on } from '@ngrx/store' ; import { loadItemsSuccess } from './items.actions' ; export interface ItemsState { items : string []; } const initialState : ItemsState = { items : [], }; export const itemsFeature = createFeature ({ name : 'items' , reducer : createReducer ( initialState, on (loadItemsSuccess, ( state, { items } ) => ({ ...state, items })) ), }); 2. Actions (Akciók) Az actionök olyan objektumok, amelyek egy adott műveletet írnak le. E...
Read more

ng-event-bus

Real-Time Notifications in Angular with ng-event-bus Ever built an Angular app where components needed to communicate without being directly connected? Maybe you wanted a global notification system  that updates instantly, no matter where the user is in your app? That’s where `ng-event-bus` shines. It acts as a lightweight event bus, letting different parts of your application talk to each other seamlessly. In this article, we’ll build a real-time notification system using `ng-event-bus`—no messy service injections, no complex state management. Why Use ng-event-bus ? Let’s face it: passing data between unrelated components in Angular can be a headache. Services with `Subject` and `BehaviorSubject` from RxJS work, but they require dependency injection, which isn’t always convenient. `ng-event-bus` provides a simple, global event system that makes component communication effortless. It’s great for: ✅ Notifications (like we’ll build today!). ✅ Inter-component communication without tig...
Read more