Flexbox 레이아웃의 모든 요소에 대해 동일한 너비를 보장하려면 어떻게 해야 합니까?

Flexbox: 모든 요소에 대해 동일한 너비 보장

다양한 항목 수량으로 반응형 Flexbox 탐색 모음을 만들려고 할 때 개발자는 요소 간 너비 분포 문제에 직면할 수 있습니다. 고르지 않다. 이 기사에서는 이 문제에 대한 해결책을 살펴봅니다.

배경

이 튜토리얼에서는 처음에 동일한 너비 배포를 달성하기 위해 display:table을 활용했지만 Flexbox로 전환할 때 문제가 발생했습니다. Flexbox는 기본적으로 flex-basis를 auto로 설정합니다. 이는 콘텐츠 크기를 각 플렉스 항목의 초기 크기로 사용합니다. 결과적으로 콘텐츠 크기가 큰 항목은 더 많은 공간을 차지합니다.

해결책: Flex-basis를 0으로

모든 요소에 동일한 너비를 보장하기 위해 flex-basis를 0으로 설정합니다. 나머지 공간은 모두 flex-grow에 따라 비례적으로 분배되도록 남겨둡니다.

예

다음 코드 조각은 flex-basis를 0으로 설정하여 문제를 해결하는 방법을 보여줍니다.

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

시각적 설명

CSS Flexbox 사양의 아래 다이어그램은 flex-basis의 개념을 보여줍니다.

[CSS Flexbox 사양의 다이어그램]

작업 중 예

수정된 Fiddle을 참조하여 동일한 너비 분포를 관찰하세요.

[Working Fiddle]

위 내용은 Flexbox 레이아웃의 모든 요소에 대해 동일한 너비를 보장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!