Flexbox가 수평 공간처럼 남은 수직 공간을 채울 수 있나요?

세로 Flexbox 공간 채우기 구현

문제:

Flexbox 행 내에서 특정 요소를 지정하여 flex 속성을 사용하여 사용 가능한 수평 공간을 채웁니다. 그러나 공간을 채우도록 지정된 요소의 높이가 부족하기 때문에 수직으로 동일한 동작을 달성하는 것은 어려운 것으로 입증되었습니다.

질문:

Flexbox를 활용하여 Flexbox에서 수행할 수 있는 방법과 유사하게 콘텐츠 요소가 Flexbox 열 내의 나머지 수직 공간을 채우도록 합니다. 행?

답변:

예, 다음 두 가지 수정 사항을 사용하면 됩니다.

1. 플렉스 방향 설정: 플렉스 컨테이너에 대한 열 .
2. 나머지 세로 공간을 차지해야 하는 요소에 flex: 1을 할당합니다. space.

이러한 기술을 적용하면 지정된 요소가 Flex 컨테이너의 하단까지 확장되어 사용 가능한 수직 공간을 효과적으로 채울 수 있습니다.

예:

이 접근 방식을 어떻게 구현할 수 있는지 보여주는 다음 코드 조각을 고려해 보세요. 연습:

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

상위 컨테이너에 flex-direction:column을 설정하고 원하는 요소에 flex:1을 설정하여 의도한 대로 세로 공간을 채우는 Flexbox 레이아웃을 효과적으로 생성합니다.

이 접근 방식은 절대 위치 지정의 필요성을 제거하여 Flexbox 레이아웃의 수직 공간을 채우기 위한 보다 우아하고 유연한 솔루션을 제공합니다.

위 내용은 Flexbox가 수평 공간처럼 남은 수직 공간을 채울 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!