Flexbox 자식이 별도의 높이에 사용 가능한 공간을 활용하도록 하려면 어떻게 해야 합니까?

Flexbox 하위 항목이 별도의 높이에 사용 가능한 공간을 활용하도록 보장

질문:

두 개의 열이 있는 Flexbox 레이아웃에서 어떻게 가장 높은 요소와 동일한 높이를 갖는 대신 다양한 크기의 요소를 배포하여 액세스 가능한 전체 영역을 채울 수 있습니까?

컨텍스트:

flexbox의 flex-wrap 속성 사용 , 요소를 여러 행으로 래핑할 수 있습니다. 그러나 기본적으로 행 내의 모든 요소는 해당 행에서 가장 높은 요소와 동일한 높이를 갖는 경향이 있습니다. 요소가 자연스러운 높이를 유지하도록 하려면 이는 바람직하지 않을 수 있습니다.

예:

다음 코드를 고려하세요.

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

.cell {
  width: 300px;
  flex: 1 auto;
}

답변:

Flexbox는 행이 위에서 설명한 대로 동작하도록 설계되었습니다. Flexbox는 행 요소가 인접한 행의 공간으로 확장될 수 있는 벽돌 스타일 레이아웃을 모방할 의도가 없습니다. align-items를 사용하여 요소 높이를 조정하는 데는 제한된 옵션이 있습니다.

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

대안으로 열 방향을 사용하거나 더 많은 사용자 정의 옵션을 위해 다중 열 모듈을 탐색하는 것을 고려해보세요.

위 내용은 Flexbox 자식이 별도의 높이에 사용 가능한 공간을 활용하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!