# min() / max()

> 複数の値から最小値または最大値を選択する関数です。レスポンシブデザインで条件分岐的な値設定が可能です。

- カテゴリ: レスポンシブ・関数
- URL: https://www.css-dictionary.com/property/min-max-functions/

## 構文

```css
min(<value>, <value>, ...) | max(<value>, <value>, ...)
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 79+ / Firefox 75+ / Safari 11.1+ / Edge 79+

## コード例

### 例1: 100%と600pxの小さい方を選択

```css
width: min(100%, 600px);
```

### 例2: 1remと3vwの大きい方を選択

```css
font-size: max(1rem, 3vw);
```

### 例3: レスポンシブなマージン設定

```css
margin: min(5vw, 2rem) auto;
```

## TIPS

clamp()の代替として使える。calc()と組み合わせて複雑な計算も可能。

## AIがよく間違えるポイント

min()とmax()は直感と逆に働くためAIも人も混乱します: min(100%, 600px)は「最大600pxまで」という上限指定、max(50%, 300px)は「最低300pxを確保」という下限指定です。AIが逆の関数を選んでいないか、境界値で必ず確認してください。

## AIへの依頼文例

- コンテナ幅を「基本100%、ただし最大600px」にしたい。min()とmax()のどちらが正しいか説明付きで書いて

## 関連プロパティ

- [clamp](https://www.css-dictionary.com/property/clamp.md)