CSS - min-content, max-content, fit-content

닌니디자인 CSS 썸네일

min-content

요소의 콘텐츠가 최대로 줄어들었을 때의 크기. 텍스트나 이미지가 줄어들 수 있는 최소한의 크기다.

.example {
    width: min-content;
}

 

 

 

---

 

max-content

요소의 콘텐츠가 줄어들지 않고 자연스럽게 늘어났을 때의 크기. 콘텐츠가 차지할 수 있는 최대 크기다.

.example {
    width: max-content;
}

 

 

 

---

 

fit-content

요소의 크기를 min-content와 max-content 사이에서 적절하게 맞춰준다. 주어진 크기에 맞춰 요소가 축소되거나 확장되며, 특정 크기 범위 내에서 콘텐츠에 맞게 요소의 크기가 조정된다.

.example {
    width: fit-content(300px);
}