Tailwind Flex는 복잡한 CSS를 작성하지 않고도 반응형 레이아웃을 만드는 효율적인 방법을 제공합니다. flex, flex-row, flex-col 등과 같은 간단한 유틸리티를 사용하면 요소를 쉽게 정렬하고 배열할 수 있습니다. Tailwind Flex는 최소한의 코드로 정렬, 방향 및 간격을 완전히 제어하면서 레이아웃 생성을 단순화하려는 개발자에게 이상적입니다.

Tailwind Flex의 Flex 컨테이너 이해

Tailwind Flex 사용의 기본은 Flex 컨테이너의 개념에서 시작됩니다. 요소를 Flex 컨테이너로 만들려면 해당 요소에 Flex 클래스를 추가하기만 하면 됩니다. 예를 들어:

이렇게 하면 div가 상위 요소 역할을 하는 플렉스 컨테이너로 전환됩니다. 이 컨테이너 안에 배치된 모든 요소는 자동으로 플렉스 아이템이 됩니다. 이러한 플렉스 항목은 이제 컨테이너나 자체에 적용되는 다양한 플렉스 속성에 반응하기 때문에 이는 매우 중요합니다.

Flex 기반 이해

Flex Basis를 사용하면 남은 공간이 배포되기 전에 Flex 항목의 초기 크기를 제어할 수 있습니다. Tailwind를 사용하면 Basis-* 유틸리티를 사용하여 각 플렉스 항목이 처음에 차지해야 하는 공간을 지정하여 이를 쉽게 설정할 수 있습니다.

다음 예를 고려해보세요.

  
01
  
02
  
03

이 스니펫에는 세 개의 하위 요소가 있는 플렉스 컨테이너가 있습니다. 처음 두 항목(01 및 02)은 기본 1/4로 설정됩니다. 즉, 각 항목은 처음에 컨테이너 너비의 1/4을 차지합니다. 세 번째 항목(03)은 기저가 1/2이므로 컨테이너의 절반을 차지합니다.

basic-* 유틸리티를 사용하면 컨테이너 내에서 플렉스 항목이 배포되는 방식을 쉽게 제어할 수 있으므로 유연하고 시각적으로 균형 잡힌 레이아웃을 만들 수 있습니다.

Flex 방향 이해: 행 및 열

Tailwind Flex로 작업할 때 방향은 Flex 컨테이너 내에서 항목이 배열되는 방식을 나타냅니다. Tailwind는 이를 위한 간단한 유틸리티를 제공하여 항목을 행이나 열에 배치해야 하는지 지정하고 필요한 경우 방향을 바꿀 수도 있습니다.

열

플렉스 항목을 수평으로 배치하려면 flex-row 유틸리티를 사용하세요. 이는 일반적으로 텍스트를 읽는 방법과 마찬가지로 항목을 왼쪽에서 오른쪽으로 정렬합니다.

  
01
  
02
  
03

행이 반전됨

Flex 항목을 반대 방향(오른쪽에서 왼쪽)으로 수평으로 배치해야 하는 경우 flex-row-reverse를 사용하세요.

  
01
  
02
  
03

열

플렉스 항목을 수직으로 배치하려면 flex-col 유틸리티를 사용하세요. 이렇게 하면 항목이 위에서 아래로 쌓이게 됩니다.

  
01
  
02
  
03

열이 반전됨

항목을 반대 방향(아래에서 위로)으로 수직으로 쌓아야 하는 경우 flex-col-reverse를 사용하세요.

  
01
  
02
  
03

플렉스 랩 이해

Flex 래핑은 Flex 컨테이너에 공간이 충분하지 않을 때 Flex 항목이 작동하는 방식을 제어하는 ​​것입니다. Tailwind는 항목 래핑 여부를 관리하는 간단한 유틸리티를 제공하므로 다양한 화면 크기와 시나리오에 맞게 레이아웃을 쉽게 조정할 수 있습니다.

포장하지 마세요

flex 항목이 래핑되는 것을 방지하려면 flex-nowrap 유틸리티를 사용하세요. 이렇게 하면 일부 항목이 컨테이너를 넘어 오버플로되는 경우에도 모든 항목이 한 줄에 유지됩니다.

  
01
  
02
  
03

일반적으로 포장

공간이 부족할 때 플렉스 항목을 정상적으로 래핑하려면 flex-wrap 유틸리티를 사용하세요. 이렇게 하면 항목이 다음 줄로 흘러갈 수 있습니다:

  
01
  
02
  
03

반전된 랩

플렉스 항목을 반대 방향으로 감싸려면 flex-wrap-reverse를 사용하세요. 이는 항목이 다음 줄로 줄바꿈되지만 반대 방향으로 줄바꿈됨을 의미합니다:

  
01
  
02
  
03

유연한 성장과 축소의 이해

Tailwind Flex는 Flex 컨테이너 내에서 Flex 항목이 늘어나거나 줄어드는 방식을 제어하는 ​​여러 유틸리티를 제공합니다. 이는 요소가 사용 가능한 공간에 반응하는 방식을 미세 조정하는 데 도움이 되므로 보다 정확한 레이아웃 동작이 가능합니다.

초기의

flex-initial 유틸리티를 사용하면 플렉스 항목이 초기 크기를 유지하면서 축소되지만 커지지는 않습니다. 필요한 경우 항목의 크기를 줄이되 확장하지는 않으려는 경우에 유용합니다.

  
01
  
02
  
03

이 예에서 항목 02와 03은 필요한 경우 축소될 수 있지만 초기 크기 이상으로 커지지는 않습니다.

플렉스 1

Flex 항목을 초기 크기를 무시하고 자유롭게 늘리거나 줄이려면 flex-1 유틸리티를 사용하세요. 이렇게 하면 컨테이너 공간에 따라 항목이 유연해집니다.

  
01
  
02
  
03

이 예에서 항목 02와 03은 사용 가능한 공간을 채우기 위해 확장되거나 축소되어 레이아웃이 반응적이고 적응 가능하게 됩니다.

자동

flex-auto 유틸리티를 사용하면 초기 크기를 고려하면서 플렉스 항목을 늘리거나 줄일 수 있습니다. 이는 항목이 사용 가능한 공간에 따라 크기를 조정하지만 여전히 원래 크기에 우선순위를 둔다는 것을 의미합니다.

  
01
  
02
  
03

이 설정에서는 항목 02와 03이 초기 너비에 초점을 유지하면서 사용 가능한 공간에 맞게 늘어나거나 줄어듭니다.

없음

플렉스 항목이 늘어나거나 줄어들지 않도록 하려면 flex-none 유틸리티를 사용하세요. 이렇게 하면 사용 가능한 공간에 관계없이 항목이 지정된 크기를 유지합니다.

  
01
  
02
  
03

여기서 항목 01과 02는 늘어나거나 줄어들지 않고 크기를 유지하는 반면, 항목 03은 사용 가능한 공간을 채우도록 조정됩니다.

플렉스 성장

Flex Grow 유틸리티를 사용하면 사용 가능한 공간을 채우기 위해 Flex 항목이 늘어나는지 여부와 그 양을 제어할 수 있습니다.

자라다

플렉스 아이템을 확장하여 사용 가능한 공간을 채우려면 성장 유틸리티를 사용하세요.

  
01
  
02
  
03

이 예에서 항목 02는 크기가 고정된 항목 01과 03 사이의 사용 가능한 공간을 차지하도록 커집니다.

성장하지 마세요

플렉스 아이템이 커지는 것을 방지하려면,row-0 유틸리티를 사용하십시오:

  
01
  
02
  
03

여기서 항목 02는 커지지 않고 초기 크기를 유지하는 반면, 항목 01과 03은 남은 공간을 채울 정도로 커집니다.

플렉스 수축

Flex Shrink 유틸리티를 사용하면 공간이 부족할 때 Flex 항목을 축소할지 여부와 축소 정도를 제어할 수 있습니다.

수축

필요에 따라 플렉스 항목을 축소하려면 축소 유틸리티를 사용하세요.

  
01
  
02
  
03

여기서 항목 02는 축소되지 않고 너비를 유지하는 반면, 항목 01과 03은 필요에 따라 축소하거나 확장할 수 있습니다.

결론

Tailwind Flex는 반응성이 뛰어나고 유연한 레이아웃을 쉽게 구축하는 데 필수적인 도구입니다. flex-row, flex-col, flex-wrap 및 flex-initial과 같은 간단한 유틸리티 클래스를 활용하면 복잡한 CSS를 작성하지 않고도 flex 항목의 정렬, 방향, 래핑 및 크기 조정을 제어할 수 있습니다. 유틸리티 우선 접근 방식은 시간을 절약하고 쉽게 사용자 정의할 수 있어 웹 개발을 더 빠르고 직관적으로 만듭니다. 자세한 내용은 Tailwind 공식 문서를 확인하세요.