CSS - clamp()

• トップ
• CSSリファレンス
• clamp()

概要

説明

value を返します。ただし、value が max より大きな時は max を、min より小さな時は min を返します。max(min, min(value, max))) と同じ意味を持ちます。

使用例

value に 50rem を指定していますが、最小 5rem、最大 10rem に制限されるので 10rem の横幅で表示されます。

.my-box {
 border: 1px solid #999;
 width: clamp(5rem, 50rem, 10rem);
}

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

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/clamp
• https://drafts.csswg.org/css-values/#calc-notation