이 문서에서는 Tailwind의 'justify-content' 유틸리티에 중단점 및 미디어 쿼리를 적용하는 방법을 예시합니다.
Tailwind에서 'justify-content'로 중단점 및 미디어 쿼리를 적용하는 방법은 무엇입니까?
Tailwind의 'justify-content' 유틸리티에 특정 중단점 및 미디어 쿼리를 적용하려면 HTML 구조를 만듭니다. 그런 다음 원하는 값을 '정당화-<값>' '를 사용하여 다양한 화면 크기에 대한 유틸리티 메릴랜드 ' 또는 ' 엘지 ” 중단점. 다음으로 확인을 위해 웹 페이지의 화면 크기를 변경합니다.
예
아래 예에는 'justify-start' 속성이 있는 플렉스 컨테이너가 있습니다. 우리는 '를 사용할 것입니다. 메릴랜드 ” 중단점 '사이에 정당화' 유틸리티 및 ' 엘지 ” 중단점 '정당화 종료' 유틸리티 “<사업부>” 중형 및 대형 화면 크기에서 항목의 수평 정렬을 변경하는 요소:
< 몸 >
< 사업부 수업 = 'flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700' >
< 사업부 수업 = 'bg-옐로우-400 w-24 h-12' > 1 < / 사업부 >
< 사업부 수업 = 'bg-옐로우-400 w-24 h-12' > 2 < / 사업부 >
< 사업부 수업 = 'bg-옐로우-400 w-24 h-12' > 삼 < / 사업부 >
< / 사업부 >
< / 몸 >
여기:
- '정당화 시작' 클래스는 컨테이너의 기본 축 시작 부분에 플렉스 항목을 정렬합니다.
- 'md:justify-between' 클래스는 중간 화면 크기에서 컨테이너의 주축을 따라 동일한 간격으로 플렉스 항목을 배포합니다.
- 'lg:justify-end' 클래스는 큰 화면 크기에서 컨테이너의 기본 축 끝에 플렉스 항목을 정렬합니다.
산출
위의 출력은 플렉스 아이템의 수평 정렬이 화면 크기가 변함에 따라 변하고 있음을 보여줍니다. 이는 지정된 중단점 및 미디어 쿼리가 'justify-content' 유틸리티로 효과적으로 적용되었음을 나타냅니다.
결론
Tailwind에서 'justify-content' 유틸리티를 사용하여 중단점 및 미디어 쿼리를 적용하려면 원하는 값을 '정당화-<값>' '를 활용하여 다양한 화면 크기에 대한 유틸리티 메릴랜드 ' 또는 ' 엘지 ” 중단점. 확인을 위해 웹 페이지의 화면 크기를 변경하고 변경 사항을 확인합니다. 이 문서에서는 Tailwind의 'justify-content' 유틸리티에 원하는 중단점 및 미디어 쿼리를 적용하는 예를 보여주었습니다.