CSS에서 min-content
및 max-content
값 은 어떻게 계산됩니까?
내재적 차원은 무엇을 의미합니까?
답변
참고 :이 텍스트에서 “너비”는 CSS가 아닌 “논리적 너비”를 나타냅니다 width
. 즉, height
언어 방향이 수직 (동아시아 언어와 같이)이거나 flexbox 또는 그리드에있는 경우 값은 CSS의에도 유효 합니다. min-content
및 max-content
유효 값이며 width
, height
, min-width
, min-height
, max-width
, max-height
더욱 특성 (등 flex-basis
).
상자의 고유 치수는 무엇입니까?
레벨 3 크기 조정 CSS는의 개념을 도입 고유 의 반대 – 치수 외부를 . 상자 의 외부 치수는 상자의 상위 상자에서 계산됩니다. 예를 들어 width: 80%
말한다 외부 치수 는 AS width
피사체의가에 따라 width
그 포함 된 상자.
반대로 한 것과, width: min-content
상기되는 극한 박스의 폭 박스 자체에 포함 된 컨텐츠의 사이즈를 계산한다.
고유 치수는 상자 자체의 속성이며, 외부 치수는 상자가 문서 및 이러한 값을 계산할 수있는 컨텍스트에 배치 된 경우에만 사용할 수 있습니다. 예를 들어, CSS-flow (고전적인 CSS 레이아웃 모드)에서 여러분이 알고 있듯이 부모 요소에 정의 된 height: 20%
경우에만 효과 height
가 있습니다 (즉, 상속 가능함). 이는 계산할 수없는 외 재적 차원 의 경우입니다 (외 재적 값을 사용할 수없는 경우 CSS 는 내재적 차원으로 대체됩니다). 대신 상자 자체에 내재 되어 있으므로 height: min-content
항상 계산할 수 있으며 문서에서 상자의 위치 (또는 상자의 부재)에 관계없이 항상 동일합니다.
min-content
and 의 정의는 max-content
수년에 걸쳐 여러 번 변경되었지만 결과는 항상 동일하게 유지되었으며 이해하기가 매우 간단합니다. 원래 커뮤니티에서에 대한 키워드로 요청한 것으로 width
, 상자가 float
울릴 때 계산 된 값이 상자의 너비와 일치 합니다. 실제로이 두 속성의 정의는 원래 float
; 이제는 다음과 같이보다 일반적으로 정의됩니다.
min-content
https://www.w3.org/TR/css-sizing-3/#min-content
더 큰 크기를 선택하여 피할 수있는 오버 플로우로 이어지지 않는 상자가 취할 수있는 가장 작은 크기입니다.
즉, 상자의 내용물이 상자 자체를 넘치지 않는 상자의 최소 너비입니다 .
이를 시각화하는 좋은 방법은 실제로 float
.
/* the computed width of #red in this example
equals to specifying #red { width: min-content } */
#blue { width: 0px; }
#blue > #red { float: left; }
(GIF 출처 : http://jsfiddle.net/6srop4zu/ )
위의 GIF 에서 빨간색 상자의 최소 콘텐츠 너비 는 파란색 상자의 너비가 0px 일 때 빨간색 상자의 너비 와 같습니다 (GIF에서는 234px, jsfiddle에서는 다를 수 있음).
보시다시피 빨간색 상자를 더 작게 만들면 단어 supercalifragilisticexpialidocious
가 빨간색 상자를 넘치게됩니다. 따라서이 경우에는 min-content
가로로 가장 많은 공간을 차지하는 단어이므로 해당 단어의 너비와 같습니다.
max-content
https://www.w3.org/TR/css-sizing-3/#max-content
사용 가능한 공간이 무한 할 때 주어진 축에서 상자의 “이상적인”크기입니다. 일반적으로이 크기는 상자가 해당 축에서 차지할 수있는 가장 작은 크기이며 내용물 주위에 맞습니다. 즉, 오버플로를 피하면서 채워지지 않은 공간을 최소화합니다.
/* the computed width of #red in this example
equals to specifying #red { width: max-content } */
#blue { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }
(GIF 출처 : http://jsfiddle.net/nktsrzvg/ )
위의 GIF 에서 빨간색 상자의 최대 콘텐츠 너비 는 파란색 상자의 너비가 무한 할 때 빨간색 상자의 너비 와 같습니다 (GIF에서는 386px, jsfiddle에서는 다를 수 있음).
여기에서 빨간색 상자는 파란색 상자의 x 축에서 사용 가능한 공간을 완전히 활용하지만 낭비하지는 않습니다. 내용은 제한없이 해당 축에서 확장 할 수 있으며, 빨간색 상자는 최대 확장 지점에서이를 감 쌉니다.
무엇에 대한 fit-content
, stretch
그리고 다른 사람? 이러한 속성은 현재 재검토 중이므로 안정적이지 않습니다 (날짜 : 2018 년 7 월). 그들은 조금 더 성숙 해지면 여기에 추가 될 것입니다.
답변
@Wes 답변이 매우 명확하고 철저하다는 것을 알았습니다. 그러나 간단한 것을 찾는 사람을 위해 :
최소 콘텐츠 :
콘텐츠 (단어 그룹)가 가질 수있는 최소 너비입니다. 콘텐츠에서 가장 큰 단어의 너비를 의미합니다.
예:
hi
this
is
biggest-word-in-the-content
<------- min-content ------>
최대 콘텐츠 :
콘텐츠 (단어 그룹)가 가질 수있는 최대 너비. 모든 단어가 한 줄로 배열 된 경우 내용의 너비를 의미합니다.
예:
hi this is a content without considering any line breaks.
<---------------------- max-content ------------------->