Flex 항목을 원래 크기에 따라 비례적으로 확장하려면 어떻게 해야 합니까?

Flex 항목을 원래 크기에 비례하여 확장

Flex 항목이 상대 너비를 유지하면서 균일하게 확장되도록 하려면 flex에서 조정합니다. 1 플렉스: 자동. 이 스위치는 콘텐츠 크기를 고려하여 크기 계산을 변경합니다.

Flex-grow 및 Flex-basis 이해

Flex-grow는 이름에서 알 수 있듯이 정의된 값과 사용 가능한 여유 공간을 기반으로 항목의 크기입니다. 그러나 항목의 초기 크기를 결정하는 flex-basis의 역할을 고려하는 것이 중요합니다.

상대 크기와 절대 크기

flex-basis가 0으로 설정하면 flex-grow는 모든 공간을 배포용 여유 공간으로 처리하여 항목의 너비에 관계없이 절대 크기를 지정합니다. content.

반대로 flex-basis가 auto(기본값)인 경우 여유 공간을 계산하기 전에 콘텐츠 크기를 고려합니다. 이를 통해 추가 공간만 비례적으로 분배되는 상대적인 크기 조정이 가능해집니다.

Flex 값 분석

• flex: 1: flex-grow의 약어: 1 ( 절대 크기)
• flex-grow: 1: 상대 콘텐츠 크기와 사용 가능한 공간을 모두 고려한 크기 조정
• flex: auto: flex-grow: 1 / flex-shrink: 1 / flex-basis: auto, 상대적인 크기 조정

flex:auto를 사용하면 원래 크기 비율을 유지하면서 행의 나머지 너비를 채우기 위해 버튼 크기가 늘어납니다. 이렇게 하면 확장된 경우에도 가장 넓은 버튼이 다른 버튼보다 넓게 유지됩니다.

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