CSS Display (megjelenítés)
A display tulajdonság határozza meg, hogyan jelenik meg egy elem a dokumentumban. Ez alapvetően befolyásolja az oldal elrendezését és az elemek viselkedését.
A display alapértékei
A display legfontosabb értékei: block, inline, inline-block, flex, grid és none. Mindegyik más-más módon határozza meg az elem elrendezését.
| Érték | Hatás |
|---|---|
| block | Blokkszintű elemként jelenik meg, új sorba törik. |
| inline | Soron belül jelenik meg, nem töri meg a sort. |
| inline-block | Soron belül jelenik meg, de úgy viselkedik, mint egy blokk. |
| flex | Rugalmas elrendezést hoz létre a gyermekek számára. |
| grid | Rácsszerkezetet biztosít az elrendezéshez. |
| none | Az elem nem jelenik meg a dokumentumban. |
Block, Inline és Inline-Block példák
Az alábbi példában három különböző display értéket használunk, hogy bemutassuk a különbségeket.
A block elem új sorba kerül, az inline elem a soron belül folytatódik, míg az inline-block elem kombinálja a kettő tulajdonságát.
Flexbox alapok
A flex elrendezés lehetővé teszi a gyermek elemek rugalmas elosztását, méretezését és igazítását.
Tippek a display használatához
A megfelelő display érték kiválasztása kulcsfontosságú a jó elrendezéshez.
- Használj flex-et vagy grid-et komplexebb elrendezésekhez.
- Az inline-block hasznos, ha egyszerre több elemet akarsz sorba rendezni.
- A display: none teljesen eltávolítja az elemet a vizuális megjelenítésből, de a DOM-ban megmarad.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
