Tailwind CSS의 첫 번째 항목 주위에 두 번째 플렉스 항목을 래핑하는 방법에 대한 가이드
P粉156983446
P粉156983446 2023-08-02 18:31:22
0
1
480
<p>두 개의 플렉스 항목이 포함된 플렉스 컨테이너가 있습니다. 첫 번째 플렉스 아이템은 컨테이너의 너비를 결정해야 하고, 두 번째 플렉스 아이템은 컨테이너를 둘러싸야 합니다. 스타일링에 Tailwind CSS를 사용하고 있는데 원하는 레이아웃을 얻을 수 없습니다. <br /><br />현재 코드는 다음과 같습니다.</p><p><br /></p> <pre class="brush:html;toolbar:false;"><div class="flex flex-col"> <div class="flex-initial w-2/3 bg-blue-500 p-4"> <!-- 첫 번째 자식 --> <!-- 첫 번째 자식의 내용 --> </div> <div class="bg-red-500 p-4"> <!-- 나머지 구성요소가 모두 포함됩니다 --> <!-- 나머지 구성요소의 내용 --> </div> </div> </pre> <p>첫 번째 자식의 너비를 설정하기 위해 w-2/3을 사용해 보았으나 두 번째 자식이 여전히 컨테이너에서 사용 가능한 모든 공간을 차지합니다. 두 번째 플렉스 항목이 첫 번째 항목을 감싸도록 만들고 첫 번째 항목이 컨테이너의 너비를 결정하도록 하려면 어떻게 해야 합니까? <br /><br />제공할 수 있는 도움이나 안내에 진심으로 감사드립니다! 미리 감사드립니다!


P粉156983446
P粉156983446

모든 응답(1)
P粉402806175

귀하의 문제를 완전히 이해했는지는 모르겠지만 해결책은 다음과 같습니다.

  • 먼저 첫 번째 하위 div의 경우 w-56과 같은 고정 너비를 사용합니다.
  • 그런 다음 상위 div에 w-fit 클래스를 추가하세요.
으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿