이 튜토리얼에서는 CSS 속성 수정자 flex-shrink에 대해 살펴봅니다. 이 옵션은 플렉스박스 모델의 일부로, 다양한 화면 크기에 맞게 유연한 레이아웃을 만들 수 있습니다. 지난 동영상에서 플렉스 컨테이너의 요소가 커지는 방법을 제어하는 플렉스-그로우를 다루었다면, 이번에는 컨테이너의 공간이 지정된 플렉스 기준보다 작을 때 요소를 축소하는 방법에 대해 이야기하겠습니다. 이 글에서는 플렉스 축소를 사용하여 플렉스박스 요소의 축소를 제한하거나 조정하는 방법을 알아봅니다.
주요 결과
- 플렉스 축소는 공간이 충분하지 않은 경우 요소가 얼마나 축소될 수 있는지 결정합니다.
- flex-shrink의 기본값은 1이며, 이는 사용 가능한 공간의 양과 컨테이너에 정의된 다른 요소의 수에 따라 요소가 공간을 차지할 수 있음을 의미합니다.
- 플렉스 축소를 사용하여 여러 요소 사이의 특정 축소 비율을 정의할 수 있습니다.
단계별 지침
다음에서는 플렉스 축소를 최대한 활용하는 단계에 대해 설명하겠습니다. 각 단계마다 나중에 비디오의 각 스크린샷으로 대체할 수 있는 스크린샷 변수를 제공하겠습니다.
먼저 CSS에서 기본 플렉스박스 애플리케이션을 볼 수 있습니다. 플렉스 베이스가 100픽셀인 세 개의 요소가 있습니다. 플렉스 컨테이너에 충분한 공간이 있으면 모든 것이 계획대로 유지됩니다.
이제 컨테이너의 높이를 200픽셀로 줄입니다. 이 경우 필요한 공간이 컨테이너의 높이보다 큽니다. 요소의 플렉스 베이스는 여전히 100픽셀이므로 플렉스 축소를 0으로 설정했기 때문에 축소할 수 없습니다.
축소 메커니즘을 활성화하려면 flex-shrink 값을 변경합니다. 탐색 요소에 대해 1로 설정하여 탐색 요소가 가능한 한 축소되어야 함을 CSS에 알립니다.
이제 변경 사항을 저장하면 탐색 요소가 콘텐츠에서 지정한 최소 높이까지 비례적으로 축소된 것을 확인할 수 있습니다.
모든 요소를 동일하게 축소하려면 모든 요소에 대한 flex-shrink를 1로 설정합니다. 이제 컨테이너가 필요한 공간보다 작아지면 모든 요소가 그에 따라 축소됩니다.
다양한 플렉스 축소 값이 레이아웃에 미치는 영향을 요약하려면 1:1:2와 같은 비율을 선택합니다. 이 경우 기본 영역(메인)이 가장 큰 비율로 축소되고 다른 요소는 각각 더 작은 비율로 축소됩니다.
즉, 공간이 부족한 경우 메인 요소가 다른 두 요소보다 더 많은 공간을 차지하거나 더 적은 공간을 필요로 합니다. 하지만 레이아웃 사용자 지정을 원하는 경우 모든 요소에 대해 플렉스 축소를 동일한 값으로 설정할 수도 있습니다.
마지막으로 플렉스-그로우, 플렉스-축소 및 플렉스-베이스의 값을 모두 결합하면 CSS에서 레이아웃을 디자인할 때 더 유연하게 사용할 수 있습니다. 항상 디자인 요구 사항에 맞게 조정해야 합니다.
요약
이 튜토리얼에서는 CSS에서 플렉스 축소를 사용하여 플렉스박스 요소의 크기를 조절하는 방법을 배웠습니다. 축소를 정의하는 다양한 방법과 이것이 레이아웃에 미치는 영향에 대해 배웠습니다.
자주 묻는 질문
플렉스 축소는 어떻게 작동하나요?플렉스 축소는 사용 가능한 공간이 플렉스 베이스보다 작은 경우 요소를 얼마나 축소할 수 있는지 결정합니다.
플렉스 축소의 기본값은 무엇인가요? 플렉스축소의 기본값은 1이며, 이는 모든 요소가 동일하게 축소됨을 의미합니다.
여러 요소에 대해 플렉스 축소를 설정하려면 어떻게 하나요?모든 요소에 동일한 플렉스 축소 값을 지정하면 축소가 균등하게 분산됩니다.
플렉스 수축을 플렉스 성장과 함께 사용할 수 있나요? 예. 플렉스 수축, 플렉스 성장 및 플렉스 베이스를 함께 사용하여 유연한 레이아웃을 구현할 수 있습니다.
플렉스 축소를 0으로 설정하면 어떻게 되나요?플렉스 축소를 0으로 설정하면 컨테이너가 플렉스 베이스의 합계보다 작아도 각 요소가 줄어들지 않습니다.
