패딩은 `border-box`와 `content-box`의 Flex-Shrink 동작에 어떤 영향을 미치나요?

패딩 및 테두리 상자의 플렉스 수축 인자

플렉스 수축 인자는 요소가 다음과 같은 경우에 얼마나 줄어들지 결정하는 데 사용됩니다. 플렉스 컨테이너에 음수 공간이 있습니다. 요소에 패딩이 적용되면 상자 크기 값에 따라 내부 플렉스 기준이 영향을 받습니다.

• 콘텐츠 상자: 내부 플렉스 기준에는 내용이므로 패딩은 축소 가능한 공간에 영향을 미치지 않습니다.
• Border-box: 내부 플렉스 베이시스에는 콘텐츠와 패딩이 모두 포함되므로 패딩은 사용 가능한 축소 공간을 줄입니다.

각 항목에 대해 크기가 조정된 플렉스 축소 인자를 계산하려면 내부 플렉스 베이시스에 플렉스 축소 인자를 곱합니다. 그런 다음 각 항목의 스케일링된 플렉스 축소 인자와 모든 스케일링된 플렉스 축소 인자의 합계 비율을 찾습니다. 마지막으로 항목의 대상 크기를 플렉스 기준에서 비율에 비례하는 음수 공간의 일부를 뺀 값으로 설정합니다.

패딩이 없으면 계산은 간단합니다.

패딩을 사용하면 사용 가능한 공간이 줄어들므로 남은 여유 공간이 변경됩니다.

border-box의 경우 지정된 플렉스 베이스는 외부 베이스(포함)입니다. 패딩). 내부 베이스는 패딩 너비를 빼서 계산됩니다. 확장된 Flex 축소 요소의 합은 변경되지 않지만 비율과 대상 크기는 조정됩니다.

예:

세 가지 항목이 있는 Flex 컨테이너를 고려해보세요. , 각각 flex-shrink 인수가 2:

• 항목 1: Flex 기준 = 300px, 패딩 = 0px
• 항목 2: Flex 기준 = 200px, 패딩 = 0px
• 항목 3: Flex 기준 = 100px, 패딩 = 0px

시나리오 1(아니요 패딩):

• 남은 여유 공간 = -200px
• 확장된 플렉스 축소 요소: 600, 200, 200
• 확장된 플렉스 축소 요소의 합계 = 1000
• 비율: 0.6, 0.2, 0.2
• 내부 너비: 180px, 160px, 60px

시나리오 2(패딩 = 10px):

• 남은 여유 공간 = -260px
• 스케일링된 플렉스 축소 인자: 560, 200, 160
• 스케일링된 플렉스 축소 인자의 합 = 920
• 비율: 0.61, 0.22, 0.17
• 내부 너비: 144px, 148px, 48px

시나리오 3(테두리 상자):

• 남은 여유 공간 = -200px
• 조정됨 플렉스 수축 인자: 636, 240, 176
• 확장된 플렉스 축소 인자의 합 = 1052
• 비율: 0.6, 0.23, 0.17
• 내부 너비: 176px, 160px, 64px

위 내용은 패딩은 `border-box`와 `content-box`의 Flex-Shrink 동작에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!