CSS 최대 인라인 사이즈 속성

정의와 사용법

max-inline-size 속성이 요소의 행 내 방향에서의 최대 크기를 지정합니다.

내용이 행 내 방향에서의 크기가 최대 크기보다 작으면 max-inline-size 속성 값이 적용되지 않습니다.

내용이 행 내 방향에서의 크기가 최대 크기보다 크면, max-inline-size 속성 값.

주의:관련 CSS 속성에 영향을 미칩니다. 를 변경하며 영향을 미칩니다. 행 내 방향을 정의하며, 이는 max-inline-size 속성의 결과. 영문 페이지에서는 블록 방향이 하향이고, 행 내 방향은 좌우로부터입니다.

CSS max-inline-size 속성과 CSS 속성 max-height 하고 max-width 매우 유사하지만 max-inline-size 속성은 행 내 방향에 의존합니다.

를 설정하면, <div> 요소의 행 내 방향에서 최대 크기를 60픽셀로 설정합니다:

div {
  max-inline-size: 60px;
}

를 설정하면, <div> 요소의 를 변경하며 영향을 미칩니다. writing-mode max-inline-size 속성의 작동 방식: 속성 값이 vertical-rl로 설정되면, 행 내 방향이 laterald에서 하향으로 변경되어 이는

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

하나의 <div> 요소(inline-size (100px)과 다른 <div> 요소(max-inline-size 내용 크기가 변할 때의 다른 반응(100px)

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

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

기본 값:	자동
상속성:	아니요
애니메이션 제작:	지원. 참조:애니메이션 관련 속성。
버전:	CSS3
제이스크립트 문법:	object.style.maxInlineSize="60px"

표中之数字는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

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