Flex 레이아웃에서 Flex-Grow가 항목의 원래 크기를 존중하도록 하려면 어떻게 해야 합니까?

원래 크기를 기준으로 Flex-Grow 확장 항목 만들기

flex 레이아웃에서 flex-grow 속성을 사용하여 항목 간에 사용 가능한 공간을 비례적으로 분배할 수 있습니다. 그러나 기본적으로 flex-grow는 이러한 항목의 원래 크기를 무시합니다.

문제: 균등화된 항목 크기

flex-grow를 다음으로 설정하여 flex를 사용하는 경우 1, 행의 모든 ​​항목이 사용 가능한 공간을 채우기 위해 늘어납니다. 너비:

.container {
  display: flex;
}

.item {
  flex: 1;
}

<div class="container">
  <div class="item">Single</div>
  <div class="item">Larger title</div>
  <div class="item">Another really large title</div>
</div>

해결책: flex-auto

를 기준으로 항목을 확장하려면 원래 크기인 경우 flex-basis: auto를 사용할 수 있습니다. 이는 사용 가능한 공간을 계산할 때 콘텐츠 크기를 고려하도록 브라우저에 지시합니다.

.container {
  display: flex;
}

.item {
  flex: auto;
}

flex: auto를 사용하면 항목이 이제 원래 너비에 비례하여 사용 가능한 공간을 채웁니다.

설명

flex-grow는 여전히 여유 공간이 분배되는 방식을 지정하지만 가변 기준 값이 먼저 고려됩니다. flex-basis가 auto인 경우 브라우저는 각 항목의 고유 크기를 결정하고 사용 가능한 공간에서 해당 크기를 뺍니다. 그런 다음 남은 공간은 flex-grow 값에 따라 분배됩니다.

이 예에서는 모든 항목이 동일한 flex-grow 값(1)을 가지므로 사용 가능한 공간이 균등하게 분배됩니다. 그러나 제목이 큰 항목은 본질적인 크기가 더 넓기 때문에 남은 공간에서 더 많은 부분을 차지합니다.

위 내용은 Flex 레이아웃에서 Flex-Grow가 항목의 원래 크기를 존중하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!