Flexbox 자식이 원래 높이를 유지하면서 사용 가능한 전체 공간을 차지하도록 만드는 방법은 무엇입니까?

Flexbox: 가변 높이 하위 항목을 구현하여 사용 가능한 공간을 최대한 활용

Flexbox는 웹 개발자가 반응형 및 유연한 레이아웃. 일반적인 사용 사례 중 하나는 각 열에 높이가 다른 하위 요소가 포함된 2열 레이아웃을 만드는 것입니다. 그러나 기본적으로 행 내의 모든 하위 항목은 가장 키가 큰 하위 항목의 키를 갖습니다.

문제:

2열 Flexbox 레이아웃을 어떻게 구성할 수 있습니까? 모든 어린이가 가장 키가 큰 어린이의 키를 갖는 대신 다양한 크기의 어린이가 사용 가능한 공간을 최대한 활용할 수 있도록 합니다. row?

해결책:

Flexbox는 기본적으로 행이 이전 또는 다음 행에 할당된 공간을 차지하는 것을 허용하지 않습니다. 따라서 CSS만으로는 사용 가능한 공간을 채우기 위해 행의 항목을 늘릴 수 있는 Masonry와 같은 동작을 재현할 수 없습니다.

구현:

align-items 속성 사용 flex-start로 설정하면 아이들이 늘어나는 것을 방지하여 원래의 상태를 유지할 수 있습니다. 높이:

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

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

이 솔루션은 각 셀이 원래 높이를 유지하도록 보장하여 가장 키가 큰 하위 항목이 전체 행에 높이를 부과하는 것을 방지합니다.

대체 접근 방식:

또는 열 방향 또는 다중 열 모듈을 사용하여 가변 높이 기둥. 이 접근 방식을 사용하면 열의 항목이 해당 열의 전체 높이를 차지하여 원하는 효과를 얻을 수 있습니다.

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