flex-basis

예제

간격 스케일 사용하기

basis-64와 basis-128 같은 basis-<number> 유틸리티를 사용해 플렉스 아이템의 초기 크기를 간격 스케일에 따라 설정할 수 있습니다:

<div class="flex flex-row">  <div class="basis-64">01</div>  <div class="basis-64">02</div>  <div class="basis-128">03</div></div>

컨테이너 스케일 사용하기

컨테이너 스케일에 따라 플렉스 아이템의 초기 크기를 설정하려면 basis-xs와 basis-sm 같은 유틸리티를 사용하세요:

<div class="flex flex-row">  <div class="basis-3xs">01</div>  <div class="basis-2xs">02</div>  <div class="basis-xs">03</div>  <div class="basis-sm">04</div></div>

백분율 사용하기

플렉스 아이템의 초기 크기를 설정하려면 basis-1/2, basis-2/3과 같은 basis-<fraction> 유틸리티를 사용하세요:

<div class="flex flex-row">  <div class="basis-1/3">01</div>  <div class="basis-2/3">02</div></div>

커스텀 값 사용하기

basis-[<value>] 구문을 사용하세요 basis를 완전히 커스텀한 값으로 설정하려면:

<div class="basis-[30vw] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 basis-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="basis-(--my-basis) ...">  <!-- ... --></div>

이는 basis-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a flex-basis 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="flex flex-row">  <div class="basis-1/4 md:basis-1/3">01</div>  <div class="basis-1/4 md:basis-1/3">02</div>  <div class="basis-1/2 md:basis-1/3">03</div></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

--container-* 테마 변수를 사용해 프로젝트에서 fixed-width basis 유틸리티를 커스터마이징할 수 있습니다:

@theme {  --container-4xs: 14rem; }

이제 basis-4xs 유틸리티를 마크업에서 사용할 수 있습니다:

<div class="basis-4xs">  <!-- ... --></div>

basis-<number> 유틸리티는 --spacing 테마 변수에 의해 동작하며, 이 변수도 커스터마이징할 수 있습니다:

@theme {  --spacing: 1px; }

스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.