[CSS] inline-size: 요소의 흐름 방향의 크기 설정

inline-size

: 요소의 인라인 방향(문서의 흐름 방향)의 크기 설정

• 기본적으로 수평 방향

inline-size: 150px; writing-mode: horizontal-tb;

 

 

 

길이 단위

• 픽셀(px)
• 퍼센트(%) 등

inline-size: 300px; /* 고정 너비 */
inline-size: 50%;   /* 부모 컨테이너의 너비에 대한 비율 */

 

 

 

min() / max()

inline-size: min(100%, 400px);

 

 

 

clamp()

: 값의 범위를 제한하는 데 사용

inline-size: clamp(최소값, 중간값, 최대값);

• 너비를 동적으로 조절

 

 

 

fit-content

: 요소의 콘텐츠에 맞게 크기를 조정

inline-size: fit-content;

 

 

 

min-content

: 콘텐츠를 표시하는 데 필요한 최소 크기를 설정

inline-size: min-content;

 

 

 

max-content

: 콘텐츠가 모두 표시될 수 있도록 최대한의 크기를 설정

inline-size: max-content;

 

 

 

---

 

inline-size - CSS: Cascading Style Sheets | MDN

 

W3Schools.com

 

CSS | inline-size Property - GeeksforGeeks