max、min関数を使いこなそう！

皆さん、こんにちは！
本日は、モダンCSSのmax、min関数について
見ていこうと思います。

min関数

min関数とは2つの値を設定し、
小さい方の値を適用するというもので、
レスポンシブコーディングに特化したモダンCSSです。

width: min(90%, 800px);

以前であれば、以下のように複数行書く必要がありましたが、
これを使えば、1行で実装できるというCSSです。

max-widht:800px;
width: 90%;

仮にウィンドウ幅が1000pxの場合、

=> 90% => 1000 × 0.9 = 900
=> 800px => 800

計算し直すと、
width: min(900px, 800px);
となり、小さい方を採用し、ウィンドウ幅1000pxであれば、
800pxが適用されるという仕組みです。

max関数

min関数に対して、max関数は、逆の大きい方を適用するCSSです。
下記の例で言えば、900pxつまり90%の方が適用されることになります。

width: max(90%, 800px);

いかがだったでしょうか。
このほかにもclamp関数といったものも用意されていますので
また紹介したいと思います。