CSS - min(), max()

• トップ
• CSSリファレンス
• min(), max()

概要

説明

min() は value1, value2, ... の1番小さい値を、max() は value1, value2, ... の1番大きな値を返却します。<length>, <frequency>, <angle>, <titme>, <percentage>, <number>, <integer> が利用可能な箇所で使用できます。類似関数に最小値と最大値を制限する clamp() があります。

使用例

.box {
  width: min(100%, 40rem);
  height: 3rem;
  border: 1px solid #ccc;
}

<div class="box">AAA</div>

リンク

• https://drafts.csswg.org/css-values/#comp-func
• https://developer.mozilla.org/ja/docs/Web/CSS/min
• https://developer.mozilla.org/ja/docs/Web/CSS/max
• https://caniuse.com/css-math-functions