비례적인 크기를 유지하면서 Flexbox 항목을 여러 행으로 줄 바꿈하려면 어떻게 해야 합니까?

Flexbox: 여러 행에 항목 표시

Flexbox에서는 여러 행이 있는 레이아웃을 구현하는 것이 어려울 수 있습니다. 8개 항목이 행당 4개 항목으로 두 행에서 동적으로 크기가 조정되고 정렬되어야 하는 시나리오를 생각해 보세요. 이 문제를 해결하려면 몇 가지 주요 조정이 필요합니다.

먼저 flex-wrap이 컨테이너 요소를 감싸도록 설정되어 있는지 확인하세요. 이는 기본 nowrap 설정을 재정의하여 항목을 여러 행으로 나눌 수 있도록 합니다.

그러나 주요 장애물은 flex 항목에 할당된 flex-grow: 1 속성에 있습니다. 이 속성은 사용 가능한 공간을 비례적으로 분배하지만 래핑을 방해할 수 있습니다. 플렉스 항목에는 콘텐츠가 없으므로 너비가 0으로 줄어들고 한 줄에 유지됩니다.

해결책은 항목의 너비를 지정하는 것입니다. 플렉스: 1 0 21%;를 적용하면 항목이 다음과 같이 됩니다.

• 플렉스: 1 - 플렉스 항목이 사용 가능한 공간을 채우기 위해 유연해집니다.
• 0 - Flex 항목의 최소 너비는 0이므로 다음을 수행할 수 있습니다. 축소.
• 21% - Flex 항목의 기본 너비는 21%이므로 콘텐츠를 수용하고 컨테이너 내에서 균등하게 배포할 수 있습니다.

위 내용은 비례적인 크기를 유지하면서 Flexbox 항목을 여러 행으로 줄 바꿈하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!