'박스 크기 조정'은 패딩을 사용한 Flexbox 축소 계수 계산에 어떤 영향을 줍니까?

Flexbox Shrink Factor with Padding 및 Border-Box

Flexbox는 사용 가능한 공간에 따라 컨테이너 내의 항목 크기를 동적으로 조정합니다. flex-shrink 속성은 컨테이너가 모든 콘텐츠를 수용하기에는 너무 작은 경우 항목이 축소되는 방식을 제어합니다.

플렉스 항목에 패딩을 적용하는 경우 외부 너비에는 패딩과 콘텐츠가 모두 포함되지만 내부 너비에는 내용 자체만 포함합니다. 상자 크기 조정 속성은 플렉스 계산에 사용되는 너비를 결정합니다.

패딩 없음

스케일링된 플렉스 축소 인자 계산 공식(내부 플렉스 기본 크기에 플렉스를 곱함) 축소 요인)은 동일하게 유지됩니다.

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

TOTAL = 1000

총 음수 여유 공간 -200px, 축소 요소 및 그에 따른 내부 너비는 다음과 같습니다.

:nth-child(1)  600 / 1000 = .6
:nth-child(1)  .6 * -200px = -120px (resulting inner width: 180px)
:nth-child(2)  200 / 1000 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 160px)
:nth-child(3)  200 / 1000 = .2
:nth-child(3)  .2 * -200px =  -40px (resulting inner width:  60px)

패딩 포함

패딩을 추가하면 콘텐츠에 사용할 수 있는 공간이 줄어들어 결과가 달라집니다. 내부 너비.

없음 테두리 상자

축소 계수는 패딩을 포함하지 않은 내부 플렉스 베이스 크기를 기준으로 계산됩니다. 결과 내부 너비는 다음과 같습니다.

:nth-child(1)  2 * 280 = 560
:nth-child(2)  1 * 180 = 180
:nth-child(3)  2 * 80 = 160

TOTAL = 900

-260px의 음수 여유 공간을 사용하면 축소 요소와 내부 너비는 다음과 같습니다.

:nth-child(1)  560 / 900 = .622
:nth-child(1)  .622 * -260px = -162px (resulting inner width: 118px)
:nth-child(2)  180 / 900 = .2
:nth-child(2)  .2 * -260px =  -52px (resulting inner width: 128px)
:nth-child(3)  160 / 900 = .178
:nth-child(3)  .178 * -260px =  -46px (resulting inner width: 34px)

테두리 상자 포함

box-sizing: border-box를 적용하면 플렉스 기본 크기에 콘텐츠와 패딩이 모두 포함됩니다. 축소 계수는 지정된 플렉스 속성에 사용 가능한 공간을 곱한 외부 플렉스 기본 크기를 사용하여 계산됩니다.

:nth-child(1)  2 * 320 = 640
:nth-child(2)  1 * 220 = 220
:nth-child(3)  2 * 120 = 240

TOTAL = 1100

음수 여유 공간이 -200px인 경우 축소 계수와 내부 너비는 다음과 같습니다.

:nth-child(1)  640 / 1100 = .582
:nth-child(1)  .582 * -200px = -116px (resulting inner width: 204px)
:nth-child(2)  220 / 1100 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 180px)
:nth-child(3)  240 / 1100 = .218
:nth-child(3)  .218 * -200px =  -44px (resulting inner width: 76px)

위 내용은 '박스 크기 조정'은 패딩을 사용한 Flexbox 축소 계수 계산에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!