The CSS min() function returns the smallest value from a list of comma-separated values. It is commonly used to create responsive layouts by allowing the browser to choose the minimum value among different units or expressions.
- Returns the smallest value from the specified list of values.
- Allows combining different units such as percentages, pixels, and viewport units.
- Helps create flexible and responsive layouts without media queries.
Syntax:
min(value1, value2);
min(value1, min(value2, min(value3, value4)));
Parameter:
- values: A comma-separated list of values from which the smallest value is selected.
Return Value:
- Returns the smallest value from the specified set of comma-separated values.
Examples of CSS min() Function
Below given are a few examples of the above function.
Example 1: The min() function sets the height and width of the box to the smaller value between 200px and 500px, resulting in a size of 200px.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<!--Driver Code Ends-->
<style>
/* CSS for the html */
* {
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
font-stretch: narrower;
font-weight: 600;
}
.box {
display: flex;
color: white;
background-color: green;
justify-content: center;
height: min(200px, 500px);
width: min(200px, 500px);
}
h2 {
align-self: center;
}
</style>
<!--Driver Code Starts-->
<body>
When nested min function is not used
<div class="box">
<h2>Geeks for geeks</h2>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The nested min() function selects the smallest value from multiple viewport-based dimensions to determine the box size.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<!--Driver Code Ends-->
<style>
/* CSS for the html */
* {
font-family: 'Times New Roman', Times, serif;
font-size: min(20px, 1000px);
font-stretch: narrower;
font-weight: 600;
}
.box {
display: flex;
color: white;
background-color: green;
justify-content: center;
height: min(20vh, min(30vh, min(40vh, 50vh)));
width: min(50vw, min(50vw, min(40vw, 50vw)));
}
h2 {
align-self: center;
}
</style>
<!--Driver Code Starts-->
<body>
When nested min function is
used with different units
<div class="box">
<h2>Geeks for geeks</h2>
</div>
</body>
</html>
<!--Driver Code Ends-->