컨테이너 크기

클래스

컨테이너 토큰은 길이를 설정하며 뷰포트 쿼리나 컨테이너 쿼리를 정의하지 않습니다. w-full, max-w-fit, basis-min 같은 전체 크기 및 내재 크기 지정은 고정 유틸리티이며 이 토큰과 독립적입니다.

값

각 값은 크기 속성이 사용하는 길이입니다. 픽셀 환산값은 루트 글꼴 크기가 16px라고 가정합니다. 이 값들은 뷰포트 중단점이나 컨테이너 쿼리 정의가 아닙니다.

최대 크기는 상한을 정합니다

max-w-3xs는 max-width: var(--container-3xs)를 설정하며 프리셋 값은 16rem입니다. 너비가 auto인 일반 블록은 포함 블록의 공간이 부족하면 이보다 좁아질 수 있습니다.

너비가 auto인 일반 블록은 최댓값 안에서 가용 공간에 맞춰집니다. 두 부모 너비는 같은 척도로 그렸으며 루트 글꼴 크기는 16px입니다.

텍스트 설명

1. max-w-3xs는 프리셋 --container-3xs 값인 16rem을 참조합니다. 두 예제 모두 일반 블록 레이아웃에서 auto 너비와 border-box 크기 계산을 사용하며 최소 너비 제약은 없습니다.
2. 첫 번째 부모는 20rem의 공간을 제공합니다. 자식은 최댓값인 16rem에서 멈추고 뒤에 사용하지 않는 공간이 남습니다.
3. 두 번째 부모는 13rem의 공간을 제공합니다. 자식은 16rem 너비가 되는 대신 더 작은 공간에 맞춰집니다.
4. 점선 윤곽은 가용 너비를 표시하며 생성된 테두리나 쿼리 컨테이너가 아닙니다. 두 부모는 루트 글꼴 크기 16px에서 같은 척도로 그렸으며 높이는 같은 콘텐츠에 따라 정해집니다.

반면 w-3xs는 너비 자체를 설정합니다. 두 클래스 모두 가운데 정렬, padding, 쿼리용 격리를 추가하지 않습니다. --container-md를 변경해도 @container(--md)나 명시적인 쿼리 임계값이 다시 정의되지는 않습니다. 쿼리 컨테이너를 만들려면 네이티브 container-type과 container-name을 사용하세요.

실제 크기에는 네이티브 레이아웃도 영향을 줍니다. 최소 크기, 상자 크기 계산, Flexbox, Grid가 사용 크기를 바꿀 수 있습니다. 최대 크기는 텍스트 줄바꿈이나 오버플로 규칙을 바꾸지 않습니다. 페이지 래퍼와 반응형 레이아웃을 결정하는 방법은 레이아웃 가이드에서 확인하세요.

관련 문서: 이름이 있는 쿼리 조건, 컨테이너 쿼리 문법, 네이티브 크기 규칙.

사용 예

대화상자 너비와 텍스트의 줄 길이에 상한을 지정합니다.

<div class="… max-w-xs">  <p>Leave this page?</p>  <p class="… max-w-3xs">Changes you made will not be saved.</p></div>

@layer theme {  :root,  :host {    --container-3xs: 16rem;    --container-xs: 20rem  }}@layer utilities {  .max-w-3xs {    max-width: var(--container-3xs)  }  .max-w-xs {    max-width: var(--container-xs)  }}

사용자 정의

프리셋 값을 변경하거나 크기를 추가하세요. --container-prose를 정의하면 max-w-prose, w-prose 및 다른 크기 클래스가 생성됩니다.

@theme {  --container-prose: 40rem;}

@layer theme {  :root,  :host {    --container-prose: 40rem  }}@layer utilities {  .max-w-prose {    max-width: var(--container-prose)  }}

관련 문서: 테마 지시문, 레이아웃.