Day 5: the max() function

The max() function takes a comma separated list of expressions. The largest value in the list will be selected.div {
width: max(400px, 200px, 300px);
/* width = 400px */
}
This example doesn’t make much sense becaus…


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

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

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

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

div {
  width: max(300px, 50vw);
}

If 50vw is lower than 300px, width matches 300px. If 50vw is larger than 300px, it matches 50vw. This is basically a shorter version of this.

div {
  min-width: 300px;
  width: 50vw;
}

PS: The next post is coming on Monday because weekends are for family and friends. ❤️

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-30T00:00:00+00:00) Day 5: the max() function. Retrieved from https://www.scien.cx/2022/09/30/day-5-the-max-function-2/

MLA
" » Day 5: the max() function." Manuel Matuzović | Sciencx - Friday September 30, 2022, https://www.scien.cx/2022/09/30/day-5-the-max-function-2/
HARVARD
Manuel Matuzović | Sciencx Friday September 30, 2022 » Day 5: the max() function., viewed ,<https://www.scien.cx/2022/09/30/day-5-the-max-function-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 5: the max() function. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/30/day-5-the-max-function-2/
CHICAGO
" » Day 5: the max() function." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/09/30/day-5-the-max-function-2/
IEEE
" » Day 5: the max() function." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/09/30/day-5-the-max-function-2/. [Accessed: ]
rf:citation
» Day 5: the max() function | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/09/30/day-5-the-max-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.

Related Posts