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

원본 크기에 따라 Flex-Grow 확장 항목 만들기

문제 이해

귀하의 상황에서는 Flexbox를 사용하여 여러 개의 버튼을 연속적으로 배열합니다. 원래 너비 차이를 유지하면서 나머지 행 공간을 채우기 위해 이러한 버튼의 너비를 비례적으로 늘리기를 원합니다. 그러나 각 버튼에 flex: 1을 설정하면 모든 버튼의 너비가 동일해집니다.

해결책: Flex: Auto로 전환

원하는 결과를 얻는 열쇠 결과는 flex-grow에 대한 올바른 값을 선택하는 데 있습니다. flex: 1 대신 flex: auto를 사용해야 합니다.

Flex-Grow 작동 방식

flex-grow는 다음을 기반으로 플렉스 항목 간에 컨테이너의 여유 공간을 배포합니다. 두 가지 요소:

• 여유 공간: 행/열.
• Flex-basis: Flex-grow를 고려하기 전 Flex 항목의 초기 크기입니다.

설명

flex: 1을 사용하는 경우 flex-basis를 0으로 설정하고 flex-grow를 1로 설정합니다. 이는 flexbox는 행의 모든 ​​공간을 여유 공간으로 처리하므로 내용에 관계없이 모든 항목에 균등하게 분배됩니다.

반면 flex: auto는 flex-basis를 auto로 설정하여 항목의 크기를 고려합니다. 여유 공간을 배포하기 전에 항목의 콘텐츠를 삭제합니다. 이렇게 하면 항목이 원래 크기 차이를 유지하면서 남은 행 공간을 계속 채울 수 있습니다.

예

코드에서 각 항목에 대해 flex: 1을 flex: auto로 바꾸세요. 버튼:

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

이렇게 하면 버튼이 원래 너비에 따라 확장되어 요구사항입니다.

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