최소 인라인 크기

최소 인라인 크기 (Min Inline Size)

요소의 최소 인라인 크기(글쓰기 방향에서 가로 축 기준)를 정하는 유틸리티예요. CSS의 min-inline-size 속성을 조절해 최소 너비를 보장할 수 있어요.

출처: 문서

본문

클래스와 스타일

min-inline-<number> — min-inline-size: calc(var(--spacing) * <number>);
min-inline-<fraction> — min-inline-size: calc(<fraction> * 100%);
min-inline-3xs — min-inline-size: var(--container-3xs); /* 16rem (256px) */
min-inline-2xs — min-inline-size: var(--container-2xs); /* 18rem (288px) */
min-inline-xs — min-inline-size: var(--container-xs); /* 20rem (320px) */
min-inline-sm — min-inline-size: var(--container-sm); /* 24rem (384px) */
min-inline-md — min-inline-size: var(--container-md); /* 28rem (448px) */
min-inline-lg — min-inline-size: var(--container-lg); /* 32rem (512px) */
min-inline-xl — min-inline-size: var(--container-xl); /* 36rem (576px) */
min-inline-2xl — min-inline-size: var(--container-2xl); /* 42rem (672px) */
min-inline-3xl — min-inline-size: var(--container-3xl); /* 48rem (768px) */
min-inline-4xl — min-inline-size: var(--container-4xl); /* 56rem (896px) */
min-inline-5xl — min-inline-size: var(--container-5xl); /* 64rem (1024px) */
min-inline-6xl — min-inline-size: var(--container-6xl); /* 72rem (1152px) */
min-inline-7xl — min-inline-size: var(--container-7xl); /* 80rem (1280px) */
min-inline-auto — min-inline-size: auto;
min-inline-px — min-inline-size: 1px;
min-inline-full — min-inline-size: 100%;
min-inline-screen — min-inline-size: 100vw;
min-inline-dvw — min-inline-size: 100dvw;
min-inline-dvh — min-inline-size: 100dvh;
min-inline-lvw — min-inline-size: 100lvw;
min-inline-lvh — min-inline-size: 100lvh;
min-inline-svw — min-inline-size: 100svw;
min-inline-svh — min-inline-size: 100svh;
min-inline-min — min-inline-size: min-content;
min-inline-max — min-inline-size: max-content;
min-inline-fit — min-inline-size: fit-content;
min-inline-(<custom-property>) — min-inline-size: var(<custom-property>);
min-inline-[<value>] — min-inline-size: <value>;

기본 예제

min-inline-<number> 유틸리티(예: min-inline-24, min-inline-64)를 쓰면 스페이싱 스케일(spacing scale)에 기반해 요소의 최소 인라인 크기를 고정값으로 정할 수 있어요.

<div class="inline-20 ...">
  <div class="min-inline-80 ...">min-inline-80</div>
  <div class="min-inline-64 ...">min-inline-64</div>
  <div class="min-inline-48 ...">min-inline-48</div>
  <div class="min-inline-40 ...">min-inline-40</div>
  <div class="min-inline-32 ...">min-inline-32</div>
  <div class="min-inline-24 ...">min-inline-24</div>
</div>

백분율 사용하기

min-inline-full 또는 min-inline-<fraction> 유틸리티(예: min-inline-1/2, min-inline-2/5)를 쓰면 요소의 최소 인라인 크기를 백분율 기반으로 정할 수 있어요.

<div class="flex ...">
  <div class="min-inline-3/4 ...">min-inline-3/4</div>
  <div class="inline-full ...">inline-full</div>
</div>

컨테이너 스케일 사용하기

min-inline-sm이나 min-inline-xl 같은 유틸리티를 쓰면 컨테이너 스케일(container scale)에 기반해 요소의 최소 인라인 크기를 고정값으로 정할 수 있어요.

<div class="inline-40 ...">
  <div class="min-inline-lg ...">min-inline-lg</div>
  <div class="min-inline-md ...">min-inline-md</div>
  <div class="min-inline-sm ...">min-inline-sm</div>
  <div class="min-inline-xs ...">min-inline-xs</div>
  <div class="min-inline-2xs ...">min-inline-2xs</div>
  <div class="min-inline-3xs ...">min-inline-3xs</div>
</div>

커스텀 값 사용하기

min-inline-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 최소 인라인 크기를 정할 수 있어요.

<div class="min-inline-[220px] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 min-inline-(<custom-property>) 문법도 사용할 수 있어요.

<div class="min-inline-(--my-min-inline-size) ...">
  <!-- ... -->
</div>

이건 min-inline-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

min-inline-size 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="inline-24 min-inline-full md:min-inline-0 ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

테마 커스터마이징

min-inline-<number> 유틸리티는 --spacing 테마 변수에 의해 제어되며, 이 변수는 자신의 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일을 커스터마이즈하는 방법은 theme variable 문서에서 더 알아보세요.

최소 인라인 크기