Flex 컨테이너에서 Flex 항목이 원치 않게 늘어나는 것을 방지하는 방법은 무엇입니까?

Flex 항목이 원치 않게 늘어나는 것을 방지하는 방법

Flex 컨테이너 내에 요소를 중첩할 때 하위 요소가 전체 컨테이너 높이를 채우기 위해 늘어나는 상황에 직면하는 것이 일반적입니다. 최소한의 내용만 포함하더라도 말이죠. 이는 특히 특정 Flex 항목의 크기를 제어하려는 경우 바람직하지 않을 수 있습니다.

문제 이해

기본적으로 Flex 항목은 컨테이너의 전체 높이를 차지하도록 늘어납니다. 이는 align-items 속성이 Stretch로 설정되어 있기 때문에 발생합니다. 이는 컨테이너가 하위 요소 간에 사용 가능한 공간을 균등하게 분배하여 수직으로 늘어나게 한다는 것을 의미합니다.

Flex 항목이 늘어나는 것을 방지

특정 Flex 항목이 늘어나는 것을 방지하려면 다음을 조정할 수 있습니다. 정렬 항목 속성. 이를 달성하기 위한 두 가지 접근 방식은 다음과 같습니다.

1. Flex 컨테이너에 align-items: flex-start 적용

Flex 컨테이너에서 align-items: flex-start를 설정하면 브라우저가 컨테이너 상단에 항목을 정렬하도록 지시합니다. 즉, 더 이상 전체 높이를 채우기 위해 늘어나지 않습니다.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

2. 특정 Flex 항목에 flex-shrink: 0 사용

특정 Flex 항목이 늘어나는 것을 방지하고 다른 항목이 남은 공간을 채우도록 하려면 flex-shrink 속성을 사용할 수 있습니다. 원하는 항목에 flex-shrink: 0을 설정하면 해당 항목이 원래 크기 이상으로 줄어들거나 늘어나는 것을 방지할 수 있습니다.

div {
  background: tan;
  display: flex;
  height: 200px;
}

span {
  background: red;
  flex-shrink: 0;
}

위 내용은 Flex 컨테이너에서 Flex 항목이 원치 않게 늘어나는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!