Flexbox에서 Flex 항목이 늘어나는 것을 중지하는 방법은 무엇입니까?

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

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

Flex 항목을 늘릴 수 있는 이유

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

Flex 항목 늘이기 방지

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

예

다음 예를 고려하세요.

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

<div>
  <span>This is some text.</span>
</div>

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

align-items: flex-start;

이렇게 하면 플렉스 항목이 컨테이너 시작 부분에 정렬되어 전체 높이를 채우기 위해 늘어나는 것을 방지할 수 있습니다.

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