La función max() en CSS se usa para establecer el máximo de los números dados. Se utiliza para devolver el valor más grande de un conjunto de valores separados por comas. Puede aceptar tipos de valores de longitud, frecuencia, número entero, ángulo y tiempo.
Sintaxis:
max(value1, value2...);
Parámetros: Toma cualquier número de parámetros.
- Valores: Es el conjunto de valores separados por comas de donde se elige el mayor.
Valor devuelto: esta función devuelve el valor más grande de un conjunto de valores separados por comas.
Ejemplo 1: Este ejemplo demuestra la función mencionada anteriormente cuando solo se dan 2 parámetros.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center;
align-content: center;
color: white;
font-size: 30px;
background-color: green;
width: max(100px, 400px);
height: max(100px, 400px);
}
p {
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<p>Geeks for geeks</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: cuando se dan más de dos parámetros en la función max().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center;
align-content: center;
color: white;
font-size: auto;
background-color: green;
width: max(10px, max(max(10px, 40px),
max(10px, 150px)));
height: max(10px, max(max(10px, 40px),
max(10px, 100px)));
}
p {
align-self: center;
}
</style>
</head>
<body>
When nested max function is used
<div class="container">
<p>Geeks for geeks</p>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Borde
- Firefox
- Ópera
- Safari