min():最小値を表示する

inline-size: min(100%, 700px);
幅700pxより小さくなったら100%
inline-size: min(100%, 700px);
min()は括弧内に指定された値や式の中で、最小の値をプロパティの値として返します。
上記の例では、画面幅が700pxよりも大きいとき、100%は700pxよりも大きくなるので、値は700pxを採用し、要素の幅もこれに等しくなります。
画面幅が700pxよりも小さくなると、100%は700pxよりも小さくなるので、100%の方が採用され、要素は画面いっぱいに広がります。
inline-size: 100%;
max-inline-size: 700px;

と同じになります。

max():最大値を表示する

inline-size: max(100%, 500px);
幅500px大きくなると100%
inline-size: max(100%, 500px);
max()はmin()とは逆に、括弧内に指定された値や式の中で、最大の値をプロパティの値として返します。
上記の例では、画面幅が500pxよりも大きいとき、100%の方が500pxよりも大きくなるので、100%を採用し、要素は画面幅いっぱいに広がります。
inline-size: 100%;
min-inline-size: 700px;

と同じになります。

clamp():最小値と最大値を設定しその間の値を表示する

inline-size: clamp(400px, 100%, 800px);
幅400pxより小さくなると、400px固定。
幅400px〜800pxが100%。
800px以上になると800px固定。
inline-size: clamp(400px, 100%, 800px);
clampは最小値と最大値、そしてその間の値を指定することができます。min()とmax()の2つの特徴を併せ持ち、ここからここまでといったような範囲指定の意味合いがあります。
上記の例では、画面幅が400pxから800pxの間であるとき、要素は画面いっぱいに広がりますが、画面幅が400pxを下回ったとき要素は400pxになりそれ以上小さくなることはありません。
そして、画面幅が800pxを上回ったとき、要素は800pxとなります。

比較関数の活用例

padding: clamp(1em, 3vw, 3em);
aaaaa
padding: clamp(1em, 3vw, 3em);
上記のような指定をすれば、ウインドウサイズに応じて余白が変化しつつも、1em以下にはならない流動的な余白を指定することができます。
画面幅に応じていい感じに余白を付けたいけど、余白が少なくなりすぎることは防げます。上下の余白だけでも指定できるので、コンテンツ幅と一緒に上下の余白を広げたいという場合に便利です。