Flexbox에서 width와 flex-basis 비교: 어떤 것을 사용해야 할까?

 

Flexbox를 사용할 때 Flex 아이템의 크기를 제어하는 두 가지 일반적인 방법이 있습니다:

1. w-* 유틸리티 (예: w-1/3, w-2/3)

2. basis-* 유틸리티 (예: basis-1/3, basis-2/3)

 

이 두 접근법은 비슷해 보이지만 레이아웃의 동작에 미묘한 차이를 가져옵니다. 이 글에서는 **width**와 **flex-basis**를 비교하고 어떤 상황에서 각각을 사용해야 할지 알려드리겠습니다.

 

1. TailwindCSS에서 width 이해하기

 

w-* 유틸리티는 요소의 width 속성을 직접 설정합니다. Flexbox에서 Flex 아이템이 동적으로 크기 조정될 필요가 없을 때 유용합니다.

 

w-* 사용 예시

 

<div class="flex gap-4">
  <div class="w-1/3 bg-blue-500">1/3</div>
  <div class="w-2/3 bg-red-500">2/3</div>
</div>

 

CSS 출력:

 

.w-1/3 { width: 33.3333%; }
.w-2/3 { width: 66.6666%; }

 

동작:

 

• width는 고정된 크기로 설정됩니다.

• flex-grow나 flex-shrink 속성을 고려하지 않기 때문에 요소가 동적으로 커지거나 작아지지 않습니다.

• 정적인 레이아웃에 적합하며 예상 가능한 디자인에 사용됩니다.

 

2. TailwindCSS에서 flex-basis 이해하기

 

basis-* 유틸리티는 요소의 **flex-basis**를 설정합니다. 이는 Flex 아이템이 성장하거나 축소되기 전의 초기 크기를 정의합니다.

 

basis-* 사용 예시

 

<div class="flex gap-4">
  <div class="basis-1/3 bg-blue-500 flex-shrink-0">1/3</div>
  <div class="basis-2/3 bg-red-500 flex-grow">2/3</div>
</div>

 

CSS 출력:

 

.basis-1/3 { flex-basis: 33.3333%; }
.basis-2/3 { flex-basis: 66.6666%; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

 

동작:

 

• flex-basis는 초기 크기를 설정하지만 flex-grow나 flex-shrink 속성과 함께 동작합니다.

• Flex 아이템은 컨테이너의 여유 공간에 따라 동적으로 커지거나 작아질 수 있습니다.

• 유연한 레이아웃에 적합하며, 요소가 비율에 맞게 조정되어야 할 때 사용됩니다.

 

3. w-*와 basis-*의 주요 차이점

 

기능 w-* (width) basis-* (flex-basis)

CSS 속성 width flex-basis

Flexbox 유연성 고정 크기, flex-grow 무시 flex-grow, flex-shrink와 함께 작동

정적 vs 동적 레이아웃 정적, 고정된 레이아웃에 적합 동적, 유연한 레이아웃에 적합

동작 요소가 여백에 따라 변하지 않음 요소가 공간에 맞게 커지거나 축소됨

유틸리티 예시 w-1/3, w-2/3 basis-1/3, basis-2/3

 

4. 어떤 것을 사용해야 할까?

 

w-* (width)를 사용할 때:

 

• 고정된 크기의 레이아웃이 필요할 때.

• Flex 아이템이 커지거나 축소되지 않아야 할 때.

• 디자인이 정적이고 예측 가능한 경우.

 

예시:

 

<div class="flex">
  <div class="w-1/3 bg-blue-500">고정 너비</div>
  <div class="w-2/3 bg-red-500">고정 너비</div>
</div>

 

basis-* (flex-basis)를 사용할 때:

 

• Flex 아이템이 유연하게 조정되어야 할 때.

• flex-grow 및 flex-shrink를 함께 사용하여 여유 공간을 활용하고 싶을 때.

• 비율 기반 레이아웃을 동적으로 설정해야 할 때.

 

예시:

 

<div class="flex">

  <div class="basis-1/3 flex-shrink-0 bg-blue-500">초기 크기</div>

  <div class="basis-2/3 flex-grow bg-red-500">여유 공간에 맞게 확장</div>

</div>

 

여기서 두 번째 요소는 컨테이너의 남는 공간에 맞게 확장됩니다.

 

5. 결론

 

정적인 레이아웃에는 w-* 유틸리티를 사용하세요. 코드가 간단하고 고정된 디자인에 적합합니다.

유연한 동적 레이아웃이 필요하다면 basis-*를 사용하고 flex-grow나 flex-shrink와 함께 조정하세요.

 

빠른 결정 가이드:

 

• 고정 너비? → w-* (예: w-1/3).

• 유연한 Flexbox 레이아웃? → basis-* (예: basis-1/3).

 

마무리

 

TailwindCSS에서 width와 flex-basis를 적절히 사용하는 방법을 알면 더 효율적이고 유연한 레이아웃을 만들 수 있습니다.

정적 레이아웃에는 w-*를, 동적이고 유연한 레이아웃에는 basis-*를 선택하세요.