내 Flex Child가 컨테이너 높이를 채우지 못하는 이유는 무엇입니까?

Flex 하위 요소를 늘려 컨테이너 높이를 채우는 방법

Flexbox로 작업할 때 하위 요소가 다음과 같은 문제에 직면하는 것이 일반적입니다. 컨테이너의 전체 높이까지 늘어나지 않습니다. 이는 종종 height: 100% 속성을 잘못 사용했기 때문에 발생합니다.

Flexbox에서 height: 100% 속성은 다음과 같은 이유로 문제가 될 수 있습니다.

• 상위 요소에 고정된 속성이 필요합니다 height는 Flexbox의 원칙에 위배됩니다.
• 여러 자녀가 ​​있는 경우 한 자녀에게 height: 100%를 사용하면 다른 자녀는 무시됩니다.

해결책은 height: 100% 속성이며 Flexbox의 기본 동작을 사용합니다. 기본적으로 행 방향(일반적인 레이아웃)의 플렉스 항목은 align-items: Stretch 속성을 사용하여 수직으로 정렬됩니다. 즉, 하위 요소는 컨테이너의 사용 가능한 높이를 채우기 위해 자동으로 늘어납니다.

다음은 높이 없이 올바른 사용법을 보여주는 예입니다. 100%:

<code class="html"><div style="display: flex">
  <div style="background-color: yellow; width: 20px"></div>
  <div style="background-color: blue">
    some<br>
    cool<br>
    text
  </div>
</div></code>

이 예에서는 , 노란색 자식은 파란색 자식 텍스트의 높이에 관계없이 컨테이너 높이를 채우기 위해 늘어납니다. 이는 기본 align-items: Stretch 값이 플렉스 항목이 수직으로 늘어나 사용 가능한 공간을 차지하도록 보장하기 때문입니다.

위 내용은 내 Flex Child가 컨테이너 높이를 채우지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!