CSS műhely.
← Minden téma

08. TÉMA · CSS

Flexbox.

Egydimenziós elrendezés: fő tengely és kereszttengely

1. FEJEZET

Flex konténer, flex elemek, két tengely

A display: flex a szülőt flex konténerré teszi, a közvetlen gyerekei flex elemek lesznek. A konténer egyetlen irány, a fő tengely mentén rendezi sorba az elemeket; a rá merőleges irány a kereszttengely. Minden flexbox-tulajdonság e két tengely valamelyikére vonatkozik, ezért a példákban mindig kirajzoljuk őket:

fő tengely – erre hat a justify-content, a gap és a flex-grow

kereszttengely – erre hat az align-items

PRÓBÁLD KI

Ugyanaz a három div

1
2
3

2. FEJEZET

A fő tengely iránya: flex-direction

A row (alapértelmezés) vízszintesen, a column függőlegesen vezeti a fő tengelyt; a -reverse változatok megfordítják az irányt. Figyeld a nyilakat: oszlopirányban a fő tengely függőleges lesz – ezért ilyenkor a justify-content függőlegesen, az align-items vízszintesen igazít.

PRÓBÁLD KI

flex-direction

1
2
3
stilus.css

3. FEJEZET

Igazítás a fő tengelyen: justify-content

Ha az elemek nem töltik ki a fő tengelyt, a justify-content dönti el, hová kerül a szabad hely: az elejére, a végére, középre, vagy az elemek közé. A space-between csak az elemek közé tesz helyet, a space-around minden elem két oldalára egyformán (ezért a szélén fele akkora a hézag), a space-evenly minden hézagot egyformára vesz.

PRÓBÁLD KI

Hová kerül a szabad hely?

justify-content
1
2
3
stilus.css

4. FEJEZET

Igazítás a kereszttengelyen: align-items

Az align-items az elemeket a kereszttengely mentén igazítja. Az alapértelmezett stretch kinyújtja őket a konténer teljes magasságára (ha nincs saját magasságuk). A baseline a szövegek alapvonalát igazítja egy vonalba – ezt piros vonal jelzi.

PRÓBÁLD KI

Különböző magasságú elemek

align-items
1
2
3
két sor
stilus.css

Egyetlen elem igazítása eltérhet a többiekétől: az elemen beállított align-self felülírja a konténer align-items értékét.

5. FEJEZET

Több sor: flex-wrap és hézag: gap

Alapból (nowrap) minden elem egy sorban marad: ha nem férnek el, a böngésző összenyomja őket, amennyire a tartalmuk engedi, utána kilógnak. A wrap megengedi, hogy új sorba törjenek. A gap az elemek közé tesz hézagot (a széleken nem) – a csíkozott sávok mutatják.

PRÓBÁLD KI

Tördelés és hézag

flex-wrap

stilus.css

6. FEJEZET

A szabad hely elosztása: flex-grow

A flex-grow azt mondja meg, hogy a fő tengelyen megmaradt szabad helyből hány részt kap az elem. 0 (alapértelmezés) esetén semmit; ha az egyik elem 2-t, a másik 1-et kap, a szabad hely kétharmada az elsőé, egyharmada a másodiké. Nem a teljes szélesség arányát adja meg, hanem a többletét!

PRÓBÁLD KI

Ki mennyit kap a maradékból?

a sötétebb sáv a kapott többlet
rövid
közepes szöveg
hosszabb tartalom itt

stilus.css

Párja a flex-shrink (mennyire nyomható össze, ha kevés a hely) és a flex-basis (a kiinduló méret). A rövidített flex: 1 jelentése: flex-grow: 1; flex-shrink: 1; flex-basis: 0% – ilyenkor az elemek a teljes helyet osztják fel egyenlően, a tartalmuk hosszától függetlenül.

7. FEJEZET

Megjelenítési sorrend: order

Az order (alapértelmezés: 0) a megjelenítés sorrendjét változtatja meg: a kisebb érték kerül előre; egyenlőség esetén a HTML-beli sorrend marad. A dobozok alsó felirata a HTML-beli helyüket mutatja.

PRÓBÁLD KI

Sorrend átrendezése

AHTML: 1.
BHTML: 2.
CHTML: 3.
DHTML: 4.
stilus.css

Az order csak a látványt rendezi át: a Tab billentyű és a képernyőolvasó továbbra is a HTML sorrendjét követi. Ha a sorrendnek jelentése van, a HTML-ben rendezd át.

ÖSSZEFOGLALÁS

Amit érdemes megjegyezni

  • Flexbox = egy tengely mentén rendezés; a flex-direction adja a fő tengelyt.
  • justify-content → fő tengely, align-items → kereszttengely.
  • flex-wrap: wrap nélkül nincs új sor; a gap csak az elemek közé tesz hézagot.
  • flex-grow a szabad hely többletét osztja szét; flex: 1 az egész helyet egyenlően.
  • order csak vizuális sorrend.