CSS Display (megjelenítés)

CSS Átlátszóság CSS Szélesség és Magasság

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.