CSS Min és Max értékek

CSS Szélesség és Magasság CSS Pozicionálás

A min- és max-tulajdonságok segítségével korlátozhatjuk az elemek méretét. Így biztosítható, hogy egy elem ne legyen túl kicsi vagy túl nagy, még akkor sem, ha a szülő konténer mérete változik.

Elérhető tulajdonságok

A min-width, max-width, min-height és max-height beállítások finomhangolást biztosítanak az elrendezéshez. Ezeket gyakran használják reszponzív design kialakításánál.

Tulajdonság	Leírás
min-width	Beállítja a minimális szélességet, amely alá az elem nem mehet.
max-width	Beállítja a maximális szélességet, amely fölé az elem nem nőhet.
min-height	Beállítja a minimális magasságot, amely alá az elem nem mehet.
max-height	Beállítja a maximális magasságot, amely fölé az elem nem nőhet.

Példa fix korlátozásokkal

Az alábbi példában a doboz minimális és maximális szélességgel és magassággal rendelkezik.

A piros doboz 200 és 400 pixel közötti szélességű lehet, és 100 és 200 pixel közötti magasságú.

Reszponzív használat

A min és max értékek százalékos szélességekkel kombinálva kiválóan alkalmazhatók reszponzív elrendezésekhez.

Tippek a min és max használatához

A min- és max-tulajdonságok segítenek megakadályozni az elemek szélsőséges zsugorodását vagy nyúlását.

Használd a min-width-et mobilon, hogy a szövegek ne törjenek túl szűk oszlopokba.
A max-width segít abban, hogy a tartalom olvasható maradjon nagy képernyőkön is.
Kombináld a min és max értékeket százalékos szélességekkel a tökéletes reszponzív hatásért.