Flexbox 항목이 동일한 너비를 차지하도록 하려면 어떻게 해야 합니까?

Flexbox 항목을 균일하게 배포

Flexbox는 다양한 레이아웃 방법으로 인기를 얻었지만, Flexbox 항목 주위에 공간을 균등하게 배포하는 경향이 있습니다. 아이템 자체. 이 문제를 해결하기 위해 모든 Flexbox 항목이 동일한 너비를 차지하도록 하는 솔루션을 살펴보겠습니다.

Flexbox는 Flex-Grow 속성을 기반으로 항목을 늘리고 줄이는 원칙에 따라 작동합니다. 기본적으로 flex-grow는 0으로 설정되어 항목이 자연스러운 너비로 렌더링됩니다. 그러나 원하는 결과를 얻기 위해 이 속성을 수정할 수 있습니다.

폭이 동일한 항목을 만들려면 flex-basis를 0으로 설정하세요. 이렇게 하면 모든 요소에 대한 공통 시작점이 설정됩니다. 또한 flex-grow를 1로 설정하여 항목이 커지도록 허용합니다. 이렇게 하면 사용 가능한 공간을 채우기 위해 동일하게 확장됩니다.

다음 CSS 코드는 이 접근 방식을 보여줍니다.

.header {
  display: flex;
}

.item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid black;
}

flex-basis를 0으로 설정하고 flex-grow를 1로 설정하면 .item 클래스 내의 모든 항목은 내용에 관계없이 동일한 공간을 갖게 됩니다. 이렇게 하면 원래 예에서 관찰된 고르지 않은 분포가 제거됩니다.

참고: 일부 IDE 및 린터에서는 flex에서 'px' 단위를 생략하도록 제안할 수 있습니다. 그러나 이를 유지하면 Internet Explorer에서 올바른 렌더링이 보장됩니다.

위 내용은 Flexbox 항목이 동일한 너비를 차지하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!