늘리지 않고 마지막 행의 Flex 항목 너비를 정당화하는 방법은 무엇입니까?

마지막 행에서 Flex 항목 너비 조정

마지막 행을 제외하고 컨테이너 전체에 요소를 균등하게 배포하려고 할 때 문제가 발생합니다. . 단순히 text-align: justify를 사용하여 요소를 정렬하는 것만으로는 충분하지 않습니다. 요소 사이에 공백이 없기 때문입니다. Flexbox는 해결책을 제공하지만 기본 동작은 마지막 줄의 요소를 전체 너비로 늘립니다.

요소가 마지막 줄의 자연스러운 너비를 사용하는 양쪽 정렬과 유사한 동작을 얻으려면 다음 접근 방식을 사용하세요.

1. 팬텀 아이템 추가:
   마지막 슬롯을 차지하는 여러 개의 "팬텀" 아이템을 만듭니다. 컨테이너. 이러한 항목은 표시 여부: 숨김으로 숨길 수 있습니다.

예를 들어 사용자 #82를 마지막 항목으로 사용하여 표시 여부: 숨김으로 가짜 사용자 83, 84, 85를 추가합니다.

2. 유일한 팬텀 아이템 사용:
   또는 단일 팬텀 아이템 사용 끝에 visible: Hidden 및 flex-grow: 10. :last-child 또는 :last-of-type 의사 클래스를 사용하여 대상을 지정합니다.

이 방법을 사용하면 마지막 줄의 요소를 자연스러운 너비를 유지하면서 남은 공간을 팬텀 아이템 전체에 고르게 분배합니다.

위 내용은 늘리지 않고 마지막 행의 Flex 항목 너비를 정당화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!