높이가 다양한 Flexbox 하위 항목에 사용 가능한 공간을 균등하게 분배하는 방법은 무엇입니까?

키가 다양한 Flexbox 하위 항목에서 사용 가능한 공간 채우기

문제:

두 번에 -열 가변상자 레이아웃, 키가 다른 어린이는 열의 높이에 맞춰 정렬되는 경향이 있습니다. 가장 키가 큰 아이. 콘텐츠에 관계없이 어린이들에게 사용 가능한 공간을 어떻게 균등하게 분배할 수 있습니까?

해결책:

기본적으로 Flexbox 행은 수직으로 늘려 어린이들에게 공간을 균등하게 분배합니다. . 이를 방지하고 아이들이 콘텐츠에 따라 공간을 차지할 수 있도록 align-items 속성을 flex-start로 설정할 수 있습니다:

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

설명:

항목 정렬 설정: flex-start는 하위 항목을 컨테이너의 위쪽 가장자리에 정렬하여 자체 콘텐츠에 따라 사용 가능한 공간을 수직으로 채울 수 있도록 합니다. 이렇게 하면 각 어린이는 줄에서 가장 키가 큰 어린이의 키를 맞추는 대신 내용에 비례하여 공간을 차지합니다.

참고:

다음에 유의하는 것이 중요합니다. flex-start는 행 내 자식의 수직 정렬에만 영향을 미칩니다. flex-wrap 속성은 사용 가능한 공간을 수용하기 위해 필요에 따라 계속해서 행을 래핑합니다.

위 내용은 높이가 다양한 Flexbox 하위 항목에 사용 가능한 공간을 균등하게 분배하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!