Flexbox를 사용하여 너비가 균일하지 않은 요소를 어떻게 균등하게 배포할 수 있습니까?

요소에 균일하지 않은 너비를 배포하는 Flexbox

문제:

Flexbox를 사용하여 항목 수는 다양하지만(3~5개) 너비가 항목 간에 균등하게 분배되지 않습니다.

분석:

Flexbox는 기본적으로 flex-basis 속성을 "auto"로 설정합니다. 이는 요소의 크기가 콘텐츠에 따라 결정된다는 의미입니다. 귀하의 예에서는 텍스트 내용이 더 큰 요소가 더 많은 공간을 차지합니다.

해결책:

균등한 배포를 보장하려면 flex-basis: 0을 설정하세요. 초기 플렉스 기준을 0으로 설정하면 나머지 공간이 플렉스 성장을 기반으로 비례적으로 분배될 수 있습니다. flex-grow 값은 모두 동일하게 확장되도록 설정해야 합니다.

코드:

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

설명:

flex-basis의 값이 0이면 탐색 항목이 콘텐츠에 관계없이 동일한 크기로 시작됩니다. 그런 다음 1의 flex-grow를 사용하면 남은 공간을 채우기 위해 동일하게 확장됩니다.

위 내용은 Flexbox를 사용하여 너비가 균일하지 않은 요소를 어떻게 균등하게 배포할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!