Flexbox의 `flex-shrink` 요소는 패딩 및 `box-sizing`을 어떻게 설명합니까?

패딩 및 테두리 상자를 사용한 Flex-shrink

Flexbox의 축소 계수 공식은 다음과 같이 패딩과 상자 크기를 고려합니다.

1단계: 내부 플렉스 베이스 계산 크기

box-sizing 속성을 기준으로 콘텐츠 상자의 크기(innerFlexBasis)를 결정합니다.

• box-sizing: content-box, innerFlexBasis = 지정된 플렉스 기준.
• If box-sizing: border-box, innerFlexBasis = 지정된 플렉스 기준 - (padding-left padding-right).

2단계: 확장된 Flex 수축 계수 계산

내부 플렉스 기준에 고정되지 않은 각 플렉스 축소 인자를 곱합니다. 항목:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

3단계: 크기 조정된 Flex 수축 계수 비율 결정

고정되지 않은 모든 크기의 Flex 수축 계수 합계 항목: sumScaledFlexShrinkFactors = ∑ (scaledFlexShrinkFactor)

합계에 대한 각 크기 조정된 Flex 축소 요소의 비율을 찾습니다. ratio = scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

4단계: 항목 내부 너비 계산

각 항목의 내부 너비 수정 비율과 남은 여유 공간에 비례:

innerWidth = innerFlexBasis 비율 * 남은FreeSpace

5단계: 외부 너비 조정

상자 크기 조정: 테두리 상자, 내부 너비에 패딩을 추가하여 외부 너비를 계산합니다(다음으로 계산). getComputedStyle).

위 내용은 Flexbox의 `flex-shrink` 요소는 패딩 및 `box-sizing`을 어떻게 설명합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!