When to use the min() or max() function

Temani Afif2/6/24About 1 minCSSArticle(s)blogcss-tip.comcss

When to use the min() or max() function 관련

CSS > Article(s)

When to use the min() or max() function

a quick trick to know when to use min() or max()

min() or max()? You always struggle to know which one to use and you end up trying both until one of them works.

💡 Here is a figure to help you decide when to use them

You start with clamp() then:

when you remove max, you use max()
when you remove min, you use min()

A 3D shine animation on image

If you want to set a max-width to your element then it's min()

width: clamp(min,100%,max) ➞ width: min(100%, max)

See max-width using min() by t_afif on CodePen.

If you want to set a min value for font-size then it's max()

font-size: clamp(min,5vw,max) ➞ font-size: max(min, 5vw)

See min font-size using max()\ by t_afif on CodePen.

More CSS Tips

Heart shape with a sliding hover effect A lovely animation to your heart shape image. February 14, 2024
Create a triangle shape with 2 CSS properties Only two CSS properties to create a triangle shape. February 11, 2024
A curved ribbon shape with hover effect A simple ribbon shape with a fancy hover effect. January 29, 2024
A fancy frame with wavy borders (wavy box) Place your image inside a wavy box using modern CSS. January 23, 2024

When to use the min() or max() function

a quick trick to know when to use min() or max()