Flexbox 자식 요소가 부모 높이의 100%를 채우도록 만드는 방법은 무엇입니까?

Flexbox 하위 높이: 100% 상위 채우기 달성

Flexbox 세계에서 하위 요소의 수직 공간을 채우는 것은 일반적인 과제입니다. . 제공한 코드 조각을 고려해 보겠습니다.

.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;
}

이 시나리오에서 flex-2-child 요소는 flex-2의 높이가 100인 경우를 제외하고 상위 컨테이너의 전체 수직 공간을 차지하지 못합니다. % 또는 flex-2-child가 절대 위치를 갖는 경우. 그러나 두 솔루션 모두 고유한 단점이 있습니다.

해결책: Align-Items Stretch

한 가지 효과적인 해결 방법은 상위 컨테이너에서 align-items 속성을 사용하는 것입니다( flex-2):

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

높이: 100%; 속성은 하위 구성 요소(flex-2-child)에서 제거되어야 합니다.

이 접근 방식은 flex-2-child 요소가 수직으로 늘어나 상위 컨테이너 내의 사용 가능한 공간을 채우도록 지시합니다. Chrome과 Firefox 모두에서 작동합니다.

align-items 대신 확장하려는 flex-2-child 요소에 align-self를 구체적으로 적용할 수 있습니다.

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

두 기술 중 하나를 활용하면 Flexbox 자식이 상위 요소의 전체 높이를 채우도록 하는 원하는 동작을 얻을 수 있습니다.

위 내용은 Flexbox 자식 요소가 부모 높이의 100%를 채우도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!