CSS의 유연한 상자 모델 속성인 flex-shrink 분석 예시(그림)

지난 시간에는 flex-grow의 구체적인 사용법에 대해 알아봤습니다. 이번 주에는 flex-basis 속성에 대해 살펴보겠습니다. flex-shrink

프로젝트의 축소 비율을 정의합니다. 1. 참고 공간이 부족하면 프로젝트가 축소된다는 전제가 있습니다. 값이 0이면 감소가 없음을 의미합니다.

         아래 예시에서는 이 속성이 정의되어 있지 않지만, 컨테이너 공간이 부족할 경우 기본적으로 프로젝트가 축소됩니다.


항목 1,2,3,4,5의 flex-grow 비율이 다음과 같이 변경되는 경우:




계산 프로세스는 다음과 같습니다(여기에서는 계산을 용이하게 하기 위해 테두리 크기를 무시합니다).
전체 상자 너비가 400px인 항목의 너비의 합은 100+100+100+100+100=500px이고, 초과 공간은 500-400px=100px입니다. 예시에서는 항목 1이 줄어들지 않습니다. 2번 항목은 1만큼 감소하고, 3번 항목은 감소율이 2이고, 4번 항목의 감소율은 3이며, 5번 항목의 감소율은 감소하지 않습니다. 그러면 초과하는 100px은 2, 3, 4로 소화되며 비율은 1:2:3입니다. 그러면 이것을 어떻게 계산하나요?

첫 번째는 각 항목의 너비 값에 flex-shrink 값을 곱하는 것입니다.
2: (100 * 1) = 100
3: (100 * 2) = 200
4: (100 * 3) = 300
그런 다음 모든 항목의 곱을 합산합니다.
(100 + 200 + 300) =600
비율을 구한 후 초과할 공간을 곱해야 합니다.
A: (100 / 600) * 100 = 16.66
B: (200 / 600) * 100 = 33.33
C: (300 / 600) * 100 = 50
각 항목별로 줄어든 공간을 빼고 남은 공간을 구하세요
A: (100 – 16.66) = 83.34
B: (100 – 33.33) = 66.67
C: (100 – 50) = 50
좋습니다. 이렇게 하면 계산된 너비가 나옵니다.

위 내용은 CSS의 유연한 상자 모델 속성인 flex-shrink 분석 예시(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!