Flexbox 또는 Flex 컨테이너는 사용자가 컨테이너 내에서 요소를 정렬하고 배포할 수 있도록 하는 레이아웃입니다. Tailwind CSS는 flexbox를 만들고 사용할 수 있는 다양한 유틸리티 클래스를 제공합니다. 박스 수준 플렉스 컨테이너는 블록 수준 요소처럼 동작/작동하고 블록을 생성하는 플렉스 컨테이너입니다. 부모 요소의 전체 너비를 차지하고 자체 뒤에 새 줄을 만듭니다.
이 글은 Tailwind에서 블록 수준 플렉스 컨테이너를 만드는 방법을 예시합니다.
Tailwind에서 블록 수준 플렉스 컨테이너를 생성/만드는 방법은 무엇입니까?
Tailwind에서 특정 블록 수준 플렉스 컨테이너를 만들려면 HTML 구조를 만드세요. 그런 다음 ' 몸을 풀다 ” 유틸리티 클래스를 원하는
통사론
< 사업부 수업 = '몸을 풀다 ...' >
...
사업부 >
암호
< 몸 >
< 사업부 수업 = '플렉스 갭-2 m-2 테두리-2 테두리-검정' >
< 사업부 수업 = 'bg-노란색-500 p-4' > 첫 번째 항목 사업부 >
< 사업부 수업 = 'bg-노란색-500 p-4' > 두 번째 항목 사업부 >
< 사업부 수업 = 'bg-노란색-500 p-4' > 세 번째 항목 사업부 >
사업부 >
몸 >
여기 부모
-
- “ 몸을 풀다 ” 클래스는 블록 수준의 플렉스 컨테이너를 만드는 데 활용됩니다.
- “ 갭-2 ” 클래스는 flex의 하위 요소 사이에 2단위의 간격을 추가합니다.
- “ m-2 ” 클래스는 컨테이너의 모든 면에 2 단위의 여백을 추가합니다.
- “ 국경-2 ” 클래스는 컨테이너에 2단위 너비의 테두리를 추가합니다.
- “ 테두리 검정 ” 클래스는 테두리 색상을 검정색으로 설정합니다.
하위 플렉스 요소에서:
-
- “ bg-옐로우-500 ” 클래스는 플렉스 아이템의 배경에 노란색을 적용합니다.
- “ p-4 ” 클래스는 플렉스 아이템의 모든 면에 4단위의 패딩을 추가합니다.
산출
위 출력에서 테두리는 컨테이너가 상위 요소(브라우저)의 전체 너비를 차지하는 블록 수준 플렉스 컨테이너임을 나타냅니다.
또는 사용자는 웹 페이지에서 플렉스 컨테이너 요소를 검사하여 이를 확인할 수 있습니다.
위의 출력은 컨테이너가 블록 수준 플렉스 컨테이너임을 나타냅니다.
결론:
Tailwind에서 블록 수준 플렉스 컨테이너를 만들려면 ' 몸을 풀다 ” 유틸리티 클래스를 특정 컨테이너와 함께 사용하고 하위 요소를 지정합니다. 사용자는 필요에 따라 플렉스 항목을 정의하고 수정할 수 있습니다. 확인을 위해 컨테이너에 테두리를 추가하고 웹 페이지를 보거나 웹 페이지에서 해당 요소를 검사합니다. 이 기사에서는 Tailwind에서 블록 수준의 플렉스 컨테이너를 만드는 방법을 설명했습니다.