Flex Child의 \'높이: 100%\'가 Flexbox를 중단시키는 이유는 무엇입니까?

명시적인 상위 높이 없이 Flex 하위를 늘려 컨테이너 높이 채우기

Flex 하위를 늘려 컨테이너 전체를 채워야 하는 상황 height: 부모의 키가 다른 자식의 콘텐츠에 따라 달라지도록 하기 위해 자식에 "height: 100%"를 설정하면 Flexbox에서 예상치 못한 동작이 발생할 수 있습니다.

"height: 100%"를 사용하는 이유 Break Flexbox

Flexbox에서 "height: 100%"를 사용하는 경우:

• 확장되는 요소의 상위에는 선언된 높이가 필요하며 이는 Flexbox의 기본 동작에 어긋납니다.
• 늘어난 요소 위나 아래에 다른 자식이 있는 경우 "높이: 100%"는 해당 자식의 존재를 무시하고 충돌을 발생시킵니다.

해결책: " height: 100%"

Flexbox를 손상시키지 않고 원하는 스트레칭을 얻으려면 하위 요소에서 "height: 100%"를 제거하면 됩니다.

설명

행 방향(기본값)이 있는 Flexbox에서 "align-items" 속성은 수직 동작을 제어합니다. 기본 설정은 "stretch"로, 부모 항목에 명시적으로 높이가 설정되지 않은 경우 Flex 항목이 사용 가능한 높이에 맞게 자동으로 늘어납니다.

코드 예

고려하세요. 다음 코드 조각:

<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>

이 예에서 노란색 하위 항목은 상위 항목의 전체 높이를 채울 정도로 늘어나며, 상위 항목의 높이는 파란색 하위 항목의 텍스트 콘텐츠에 따라 자동으로 조정됩니다.

위 내용은 Flex Child의 \'높이: 100%\'가 Flexbox를 중단시키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!