Tailwind CSS는 ' 정렬 항목 ” 유틸리티는 컨테이너의 교차 축을 따라 플렉스 및 그리드 항목의 위치를 제어합니다. 'items-start', 'items-center', 'items-end', 'items-baseline' 등과 같은 다양한 유틸리티 클래스가 있습니다. 또한 사용자는 'items-
이 기사에서는 Tailwind CSS에서 hover on align-items 유틸리티를 적용하는 방법을 예시합니다.
Tailwind에서 'align-items' 유틸리티에 마우스 오버를 적용하는 방법은 무엇입니까?
Tailwind의 'align-items' 유틸리티에 마우스 오버를 적용하려면 HTML 구조를 만들고 ' 호버링 ” 원하는 “ 항목-<값> ” 컨테이너의 유틸리티. 다음으로 HTML 웹 페이지를 확인하고 지정된 요소에 마우스를 올려 변경 사항을 확인합니다.
통사론
< 요소 수업 = 'hover:항목-<값> ...' > ... 요소 >
예
이 예제에서는 “items-start” 속성을 가진 플렉스 컨테이너를 만들 것입니다. 그런 다음 ' 호버:항목 중심 ”의 클래스 <사업부> ' 요소. 이렇게 하면 플렉스 항목이 컨테이너의 교차 축 중앙에 정렬됩니다.
< 몸 >
< 사업부 수업 = 'flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< 사업부 수업 = 'bg-핑크-600 py-4 w-40' > 1 사업부 >
< 사업부 수업 = 'bg-핑크-600 py-12 w-40' > 2 사업부 >
< 사업부 수업 = 'bg-핑크-600 py-8 w-40' > 삼 사업부 >
사업부 >
몸 >
여기:
-
- “ 항목 시작 ” 클래스는 플렉스 항목을 컨테이너의 시작 부분에 수직으로 정렬합니다.
- “ 호버:항목 중심 ” 클래스는 마우스가 항목 위에 있을 때 플렉스 항목을 컨테이너 중앙에 세로로 정렬합니다.
산출
위의 웹 페이지에서 플렉스 아이템의 정렬이 컨테이너의 교차축을 따라 바뀌는 것을 볼 수 있습니다.
결론
Tailwind의 'align-items' 유틸리티에 호버 효과를 적용하려면 ' 호버링 ” 특정 “ 항목-<값> 플렉스 또는 그리드 컨테이너의 유틸리티. 확인을 위해 웹 페이지에서 지정된 컨테이너 위로 마우스를 가져갑니다. 이 문서에서는 Tailwind의 'align-items' 유틸리티에 호버 효과를 적용하는 예를 보여줍니다.