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

Flexbox 레이아웃을 사용할 때 Flex 항목이 늘어나 컨테이너의 사용 가능한 공간을 채울 수 있습니다. . 그러나 이런 일이 발생하는 것을 방지하고 싶은 상황이 있습니다.

Flex 항목을 늘릴 수 있는 이유는 무엇입니까?

기본적으로 Flex 항목은 기본 축을 따라 늘어납니다. 일반적으로 가로(행) 또는 세로(열)인 컨테이너입니다. 이는 flex 속성이 기본적으로 1로 설정되어 있기 때문입니다. 이는 항목이 유연하고 사용 가능한 공간을 채울 수 있도록 확장되어야 함을 나타냅니다.

Flex 항목 늘이기 방지

Flex 항목이 늘어나는 것을 방지하려면 기본 Flex 값을 0으로 설정하여 재정의할 수 있습니다. 이렇게 하면 항목이 내용에 맞게 줄어들어 항목보다 더 많은 공간을 차지하지 않게 됩니다. 필요합니다.

예

다음 예를 고려하십시오.

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

  This is some text.

이 예에서 플렉스 항목(범위)은 컨테이너의 전체 높이를 채울 정도로 늘어납니다. 이를 방지하려면 div 요소에 다음 스타일을 추가하세요.

align-items: flex-start;

이렇게 하면 flex 항목이 컨테이너 시작 부분에 정렬되어 항목이 늘어나는 것을 방지합니다. 전체 높이를 채우세요.