Flexbox 자식이 사용 가능한 수직 공간을 차지하도록 하는 방법은 무엇입니까?

Flexbox 하위 항목이 사용 가능한 수직 공간을 차지하도록 보장

여러 열이 있는 Flexbox 레이아웃을 활용하는 경우 하위 항목이 다양한 공간을 차지하는 것이 바람직할 수 있습니다. 행의 가장 키가 큰 자식의 높이로 제한되지 않고 사용 가능한 공간을 최대한 활용합니다.

문제 해결

Flexbox 행은 항목을 세로로 정렬하여 자연스럽게 동작합니다. 지정된 공간 내에서. 그러나 항목이 행의 전체 높이까지 늘어나는 것을 방지하려면 align-items 속성을 사용하여 수직 정렬을 제어할 수 있습니다.

해결책

원하는 동작을 수행하려면 align-items 속성을 flex-start로 설정하세요.

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

이렇게 하면 자식이 행의 수직 정렬을 유지하면서 고유한 높이를 유지할 수 있습니다.

추가 옵션

원하는 레이아웃에 더 복잡한 간격 동작이 필요한 경우 열 방향 또는 다중 열 모듈을 사용하여 원하는 결과를 얻는 것이 좋습니다. 자세한 내용은 https://stackoverflow.com/a/20862961/1652962에서 포괄적인 SO 답변을 참조하세요.

위 내용은 Flexbox 자식이 사용 가능한 수직 공간을 차지하도록 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!