Flexbox 자식이 부모 컨테이너의 전체 높이를 차지하도록 만드는 방법은 무엇입니까?

Flexbox 자식을 부모와 같은 높이로 만드는 방법

Flexbox로 작업할 때 자식 요소가 부모 컨테이너의 전체 수직 공간을 채우도록 하는 데 어려움을 겪을 수 있습니다. . 하위 요소가 상위 요소 높이의 100%가 되기를 원하는 경우 이는 특히 실망스러울 수 있습니다.

Flexbox 상위 컨테이너 설정

다음은 단순화된 버전입니다. HTML과 CSS 코드:

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

해결책: align-items: Stretch

절대적인 위치 지정이나 flex-2 요소의 높이를 다음으로 설정하지 않고 이 문제를 해결하려면 100%, 상위 컨테이너 flex-2의 align-items: Stretch 속성을 사용할 수 있습니다.

.flex-2 {
  display: flex;
  align-items: stretch;
}

높이 속성에 대한 참고 사항

중요합니다. flex-2-child 요소에서 height: 100% 속성을 제거합니다. 이렇게 하면 하위 요소가 상위 컨테이너 내에서 수직으로 늘어납니다.

대안: align-self

또 다른 옵션은 align-self: Stretch on을 사용하는 것입니다. 높이를 채우려는 특정 하위 요소.

.flex-2-child {
  align-self: stretch;
}

이 방법을 사용하면 개별 하위를 더 효과적으로 제어할 수 있습니다. 요소.

위 내용은 Flexbox 자식이 부모 컨테이너의 전체 높이를 차지하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!