Day 4: the min() function

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

The min() function takes a comma separated list of expressions. The smallest value in the list will be selected.

div {
  width: min(400px, 200px, 300px);
  /* width = 200px */
}

This example doesn’t make much sense because the value will always be 200px.
min() shows its true power when you use relative units.

div {
  width: min(100%, 800px);
}

If the available space is below 800px, it matches 100%. If it's more than 800px, it matches 800px. This is basically a shorter version of this.

div {
  width: 100%;
  max-width: 800px;
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-09-29T00:00:00+00:00) Day 4: the min() function. Retrieved from https://www.scien.cx/2022/09/29/day-4-the-min-function-2/

MLA

" » Day 4: the min() function." Manuel Matuzović | Sciencx - Thursday September 29, 2022, https://www.scien.cx/2022/09/29/day-4-the-min-function-2/

HARVARD

Manuel Matuzović | Sciencx Thursday September 29, 2022 » Day 4: the min() function., viewed ,<https://www.scien.cx/2022/09/29/day-4-the-min-function-2/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 4: the min() function. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/29/day-4-the-min-function-2/

CHICAGO

" » Day 4: the min() function." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/09/29/day-4-the-min-function-2/

IEEE

" » Day 4: the min() function." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/09/29/day-4-the-min-function-2/. [Accessed: ]

rf:citation

» Day 4: the min() function | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/09/29/day-4-the-min-function-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.