Tailwind CSS 동일 높이 열

얼마 전에 CSS equal height columns 을 만드는 방법을 보여드렸는데 오늘은 Tailwind CSS에서 이를 다시 살펴보겠습니다.

저는 Tailwind를 탐험하고 일이 얼마나 쉬워졌는지 보는 것을 좋아합니다.

오늘의 주요 아이디어는 높이 텍스트가 다른 세 개의 열이 있다는 것입니다.
그러나 이러한 열은 동일한 크기(가장 큰 열)로 확장되어야 합니다.

최종 목표는 다음과 같아야 합니다.

Tailwind CSS 동일 높이 열

이러한 열을 달성하려면 세 개의 열에 대한 래퍼부터 시작해야 합니다. 이 래퍼는 플렉스 클래스가 있는 단일 div일 수 있습니다.

<div class="flex">
  <!-- Our three columns -->
</div>

그런 다음 열이 어떻게 표시되는지 살펴보겠습니다.

<div class="w-1/3 p-6 bg-gray-100 flex flex-col">
  <h3 class="text-2xl mb-2">Title 1</h3>
  <p class="flex-1">Content</p>
  <a href="#" class="bg-purple-500 mt-2 text-center p-4 text-white">Button</a>
</div>

여기서 무슨 일이 일어나고 있는지 설명하겠습니다.

래핑 div는 열 중 하나이며 다음 클래스를 포함합니다.

w-1/3 : 래핑 div

의 1/3이 됩니다.

p-6 : 이 div에 약간의 패딩을 추가합니다

.

bg-gray-100 : 밝은 회색 배경을 추가합니다

flex : 이렇게 하면 이 항목도 플렉스 항목이 됩니다. p 요소

를 사용하여 마법을 만들 것이기 ​​때문에 이것은 큰 부분입니다.

flex-col : 플렉스가 수직으로 흐르는지 확인합니다

.

그런 다음 제목과 버튼에 대한 몇 가지 기본 스타일을 추가하지만 실제 마법은 p 클래스에서 나옵니다.
flex-1는 이 요소가 해당 열의 나머지 공간에 걸쳐 있는지 확인하므로 다른 요소보다 텍스트가 적으면 강제로 더 크게 만듭니다.

결과는 다음 Codepen입니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나