이 글은 Tailwind CSS에서 플렉스 항목이 커지거나 줄어들지 않도록 방지하는 방법을 예시합니다.
Tailwind에서 플렉스 아이템이 늘어나거나 줄어들지 않도록 방지하는 방법은 무엇입니까?
Tailwind에서 플렉스 아이템이 커지거나 줄어들지 않도록 HTML 파일을 만드세요. 그런 다음 ' 플렉스 성장-0 ' 그리고 ' 플렉스 수축-0 ” HTML 프로그램의 특정 플렉스 항목이 있는 유틸리티. 이러한 유틸리티는 플렉스 항목이 플렉스 컨테이너 내의 공간에 따라 커지거나 줄어들도록 허용하지 않습니다. 그런 다음 HTML 웹 페이지의 화면 크기를 조정하여 변경 사항을 확인하십시오.
실제 구현을 위해 제공된 단계를 따르십시오.
1단계: HTML 프로그램에서 Flex 항목이 커지거나 줄어들지 않도록 방지
HTML 프로그램을 만들고 ' 플렉스 성장-0 ' 그리고 ' 플렉스 수축-0 ” 원하는 플렉스 아이템이 늘어나거나 줄어들지 않도록 하는 유틸리티:
< 몸 >
< 사업부 수업 = '플렉스 H-20' >
< 사업부 수업 = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / 사업부 >
< 사업부 수업 = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / 사업부 >
< 사업부 수업 = 'flex-grow bg-teal-500 w-40 m-1' > 삼 < / 사업부 >
< 사업부 수업 = '플렉스 수축 bg-red-500 w-40 m-1' > 4 < / 사업부 >
< / 사업부 >
< / 몸 >
여기:
- “ 플렉스 성장-0 ” 클래스는 공간이 있을 때 플렉스 항목이 커지거나 플렉스 컨테이너 내에서 추가 공간을 차지하는 것을 방지합니다.
- “ 플렉스 수축-0 ” 클래스는 공간이 부족할 때 플렉스 항목이 플렉스 컨테이너 내에서 축소 및 축소되는 것을 방지합니다.
- “ 유연한 성장 ” 클래스를 사용하면 플렉스 항목이 플렉스 컨테이너 내에서 사용 가능한 공간을 늘리고 차지할 수 있습니다.
- “ 플렉스-수축 ” 클래스를 사용하면 플렉스 컨테이너 내에 공간이 충분하지 않은 경우 플렉스 항목을 축소할 수 있습니다.
2단계: 출력 확인
HTML 웹 페이지를 보고 화면 크기를 변경하여 원하는 플렉스 항목이 커지거나 줄어들지 않도록 합니다.
위의 출력은 가변 항목 '2'가 부족한 공간에서 줄어들지 않고 항목 '1'이 사용 가능한 공간에서 커지지 않음을 보여줍니다. 이는 원하는 플렉스 항목이 늘어나거나 줄어들지 않았음을 나타냅니다.
결론
Tailwind에서 플렉스 아이템이 늘어나거나 줄어들지 않도록 하려면 ' 플렉스 성장-0 ' 그리고 ' 플렉스 수축-0 ” HTML 프로그램에서 원하는 플렉스 항목이 있는 유틸리티. 확인을 위해 HTML 웹 페이지의 화면 크기를 변경하고 봅니다. 이 글은 Tailwind CSS에서 플렉스 항목이 커지거나 줄어들지 않도록 하는 방법을 예시했습니다.