Flexbox 항목을 원래 크기에 비례하여 확장하려면 어떻게 해야 합니까?

Flex-Grow 항목을 원본 크기에 따라 확장하기

Flexbox를 사용하여 요소의 스타일을 지정할 때 컨테이너의 남은 공간을 항목 간에 분배하는 것이 바람직합니다. 그러나 기본적으로 flex-grow는 초기 크기에 관계없이 모든 항목에 동일한 너비를 할당합니다. 이러한 차이를 유지하려면 flex-grow를 '1' 대신 'auto'로 설정하는 것이 좋습니다.

설명

Flex-grow는 사용 가능한 여유 공간과 flex-basis라는 두 가지 매개변수를 기반으로 작동합니다. 여유 공간은 플렉스 항목 간에 분배될 수 있는 컨테이너의 남은 공간을 나타냅니다. Flex-basis는 배포 전 각 항목의 초기 크기를 결정합니다.

절대 크기(flex: 1):

• flex-basis가 0으로 설정된 경우 , flex-grow는 사용 가능한 전체 공간을 여유 공간으로 처리합니다.
• 이렇게 하면 크기가 비례적으로 동일해집니다. 원본 콘텐츠에 관계없이 모든 항목에 적용됩니다.

상대적 크기 조정(flex: auto):

• flex-basis가 자동인 경우( 기본), flex-grow는 각 항목의 콘텐츠 크기를 고려합니다.
• 컨테이너에 남은 공간만 그런 다음 flex-grow 값을 기준으로 비례적으로 배포됩니다.

예:

폭이 다양한 세 개의 버튼을 고려해보세요. 우리는 각각의 비례적인 크기를 유지하면서 컨테이너의 남은 너비를 채우길 원합니다.

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

flex-grow를 자동으로 설정하면 버튼이 현재 크기에서 비례적으로 확장되어 사용 가능한 공간을 채우고 초기 크기 차이를 유지합니다.

위 내용은 Flexbox 항목을 원래 크기에 비례하여 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!