Flex-Shrink Factor는 Border-Box 크기 조정에서 패딩과 어떻게 상호 작용합니까?

패딩 및 테두리 상자에서 flex-shrink 인수는 어떻게 되나요?

사양에 설명된 대로 축소 인수에 대한 Flexbox 계산에는 각 축소 인수를 곱해야 합니다. 플렉스 기본 크기별로 항목을 조정하여 축소 비율이 조정됩니다. 그런 다음 이러한 확장된 요소는 각 항목에 적용되어야 하는 음수 여유 공간의 비율을 결정하는 데 사용됩니다.

Content-Box 대 Border-Box

padding이 도입된 플렉스 기본 크기는 상자 크기 값에 따라 달라집니다. 콘텐츠 상자의 경우 패딩이 외부 너비에 추가되어 플렉스 기본 크기로 사용되는 내부 크기가 유지됩니다. 결과적으로 수축 계산은 패딩이 없는 시나리오와 동일하게 유지됩니다.

그러나 box-sizing이 border-box로 설정된 경우 지정된 플렉스 베이스 크기는 패딩을 포함한 외부 너비가 됩니다. 내부 플렉스 기본 크기는 테두리와 패딩 너비를 빼서 계산됩니다. 내부 플렉스 베이스 크기의 이러한 변화는 확장된 축소 계수 계산과 궁극적으로 플렉스 항목의 수축 동작에 영향을 미칩니다.

Border-Box를 사용한 수축 계산

다음을 고려하세요. padding 및 box-sizing이 border-box로 설정된 상황:

• 외부 플렉스 베이스 크기: [360px, 220px, 120px]
• 내부 플렉스 기본 크기: [320px, 200px, 100px]
• 패딩: 각 측면에 20px
• 음수 여유 공간: -200px

조정된 축소 계수 계산:

• item1: (320px 2) / [(320px 2) (200px 1 ) (100px 2)] = 0.64
• item2: (200px 1) / [(320px 2) (200px 1) (100px 2)] = 0.24
• item3: (100px 2) / [(320px 2) (200px 1) (100px 2)] = 0.12

마지막으로 크기 조정된 축소 인자를 음수 여유 공간에 적용합니다.

• 항목1: 0.64 * (-200px) = -128px
• item2: 0.24 * (-200px) = -48px
• item3: 0.12 * (-200px) = -24px

내부 및 외부 조정 크기

외부 Flex 기본 크기를 고려하여 계산된 크기 조정:

• item1: 내부: 320px - 128px = 192px; 외부: 192px 2*20px = 232px
• item2: 내부: 200px - 48px = 152px; 외부: 152px 2*20px = 192px
• item3: 내부: 100px - 24px = 76px; 외부: 76px 2*20px = 116px

이는 플렉스 축소 계수와 테두리 상자 크기 고려 사항을 기반으로 수축이 어떻게 분산되는지 보여줍니다. 패딩이 외부 너비에 다시 추가되므로 콘텐츠 상자 시나리오와 비교하여 계산된 크기가 달라집니다.

위 내용은 Flex-Shrink Factor는 Border-Box 크기 조정에서 패딩과 어떻게 상호 작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!