이 기사에서는 Tailwind CSS에서 플렉스 항목이 래핑되지 않도록 하는 방법을 설명합니다.
Tailwind에서 플렉스 항목이 래핑되는 것을 방지/중지하는 방법은 무엇입니까?
Tailwind에서 플렉스 항목이 래핑되지 않도록 하려면 HTML 파일을 만드세요. 그런 다음 HTML 프로그램의 플렉스 컨테이너와 함께 'flex-nowrap' 유틸리티를 사용하여 플렉스 항목이 래핑되지 않도록 합니다. 그런 다음 HTML 웹 페이지를 보고 변경 사항을 확인하십시오.
아래 언급된 단계를 시도하여 더 잘 이해하십시오.
1단계: Flex 항목이 HTML 프로그램에서 래핑되지 않도록 방지
HTML 프로그램을 만들고 ' 플렉스-노랩 플렉스 항목이 래핑되는 것을 방지하기 위해 원하는 플렉스 컨테이너가 포함된 유틸리티:
< 몸 >
< 사업부 수업 = '플렉스 플렉스-노랩 h-40' >
< 사업부 수업 = '기본-1/4 bg-red-500 m-1' > 1 < / 사업부 >
< 사업부 수업 = '기본-1/3 bg-노랑-500 m-1' > 2 < / 사업부 >
< 사업부 수업 = '기본-1/2 bg-teal-500 m-1' > 삼 < / 사업부 >
< / 사업부 >
< / 몸 >
여기:
- “ 몸을 풀다 ” 클래스는 요소를 지정하고 자식 요소를 정렬하고 정렬할 수 있도록 합니다.
- “ 플렉스-노랩 ” 클래스는 플렉스 항목이 여러 줄로 줄 바꿈되지 않고 모든 플렉스 항목을 한 줄에 유지하도록 지정합니다.
- “ 기초-1/4 ”, “ 기초-1/3 ', 그리고 ' 기초-1/2 ” 클래스는 내부 설정
의 너비를 각각 부모 요소의 25%, 33.33% 및 50%로 설정합니다.
2단계: 출력 확인
플렉스 항목이 래핑되지 않았는지 확인하려면 HTML 웹 페이지를 봅니다.
위의 웹 페이지에서 플렉스 항목은 한 줄로 되어 있고 래핑되지 않았습니다.
결론
Tailwind에서 플렉스 항목이 래핑되지 않도록 하려면 HTML 프로그램에서 원하는 플렉스 컨테이너와 함께 'flex-nowrap' 유틸리티를 활용하세요. 이 유틸리티는 플렉스 항목이 래핑되는 것을 방지합니다. 확인을 위해 웹 페이지에서 변경 사항을 확인하십시오. 이 기사에서는 Flex 항목이 Tailwind CSS에서 래핑되지 않도록 방지하는 방법을 설명했습니다.