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

Flexbox 자식이 전체 부모 높이를 차지함

Flexbox 레이아웃에서 기본적으로 자식 요소는 부모 높이 전체를 채우지 않습니다. 컨테이너. 이는 일관된 수직 배열을 만들려고 할 때 문제가 될 수 있습니다.

문제: .flex-2 내의 .flex-2-child가 부모:

.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는 다음과 같이 높이를 완전히 차지하지 않습니다. 예상됩니다.

해결 방법 1: align-items: Stretch:

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

이 솔루션은 flex 항목 정렬을 수정하여 flex-2-child가 늘이고 채울 수 있도록 합니다. 사용 가능한 높이.

해결 방법 2: align-self:

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

이 대체 솔루션은 하위 요소에 직접 정렬을 적용하여 상위 플렉스 항목의 높이를 채우도록 합니다.

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