CSS 최소 인라인 사이즈 속성

정의와 사용법

min-inline-size 요소가 행 내 방향에서 가장 작은 크기를 지정합니다.

내용의 내부 방향 크기가 최소 크기보다 작으면 적용됩니다. min-inline-size 속성 값.

내용의 내부 방향 크기가 최소 크기보다 크면 min-inline-size 속성 값이 적용되지 않습니다.

주의:관련 CSS 속성 writing-mode 내부 방향을 정의하며 이는 min-inline-size 속성의 결과입니다. 영어 페이지에서는 블록 방향은 downwards이고, 내부 방향은 left-to-right입니다.

CSS min-inline-size 속성이 CSS 속성 min-높이 와 min-width 매우 유사하지만 min-inline-size 속성은 내부 방향에 의존합니다.

200px의 최소 내부 크기를 설정한 <div> 요소:

div {
  min-inline-size: 200px;
}

<div> 요소의 writing-mode 속성 값을 vertical-rl로 설정할 때, 내부 방향은 laterally에서 downwards로 변경되어 이는 min-inline-size 속성의 작동 방식에 영향을 미칩니다:

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

한 예제를 관찰해 보세요 inline-size 200px의 <div> 요소와 다른 min-inline-size 200px의 <div> 요소가 내용 크기가 변경될 때의 다른 표현을 보여줍니다:

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

min-inline-size: 자동|길이|기본값|상속;

값	설명
자동	기본값. 요소의 기본 min-inline-size 값.
길이	고정 단위(예: px, pt, cm 등)로 최소 크기를 지정합니다. 참조:CSS 단위。
%	백분율로 최소 크기를 지정하여 부모 요소에 비해 해당 축의 크기를 기준으로 합니다.
기본값	이 속성을 기본 값으로 설정합니다. 참조 기본값。
상속	부모 요소에서 이 속성을 상속합니다. 참조 상속。

기본 값:	자동
상속성:	아니요
애니메이션 제작:	지원됩니다. 참조:애니메이션 관련 속성。
버전:	CSS3
JavaScript 문법:	object.style.minInlineSize="10px"

표格에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
57.0	79.0	41.0	12.1	44.0