마지막 행의 Flexbox 항목을 원래 너비에 맞춰 정렬하려면 어떻게 해야 합니까?

동적 마지막 행 항목에 대해 Flexbox를 사용하여 양쪽 정렬 달성

이 시나리오의 목표는 마지막 행 항목에 flex 항목이 있는지 확인하는 것입니다. 컨테이너의 사용 가능한 공간을 고려하면서 컨테이너의 행은 자연스럽게 콘텐츠 너비에 맞춰 정렬됩니다. 이는 Flex 항목을 늘려 전체 행을 채우는 Flexbox의 고유 동작과 모순됩니다.

Flexbox 정렬 시도

디스플레이와 함께 Flexbox를 활용하려는 초기 시도: flex; flex-wrap: 랩; 모든 플렉스 항목이 컨테이너 너비에 맞게 늘어나는 마지막 행에 도달할 때까지 괜찮은 결과를 얻습니다. 이 효과는 특히 마지막 줄에 하나 또는 두 개의 항목만 남아 있는 경우 바람직하지 않습니다.

해결책: Phantom Items 및 Flex-Grow

해결책에는 "phantom"을 도입하는 것이 포함됩니다. " 항목은 마지막 행을 계속해서 차지하며, 기본적으로 초과 공간을 채우고 나머지 항목이 과도하게 늘어나는 것을 방지하기 위한 자리 표시자 역할을 합니다. 이 접근 방식을 구현하려면:

1. 컨테이너의 마지막 실제 플렉스 항목 뒤에 동일한 크기와 가시성을 갖는 3-4개의 팬텀 항목을 추가합니다.
2. 또는 단일 팬텀을 만듭니다. 가시성이 있는 항목: 숨김 및 flex-grow: 10. 이 항목을 구체적으로 대상으로 지정하려면 :last-child 또는 :last-of-type 의사 클래스를 사용하세요. element.

실제 구현

예를 들어, 사용자 #82가 컨테이너에서 마지막으로 표시되는 항목인 경우:

• 가시성이 있는 팬텀 사용자 #83, #84 및 #85를 추가합니다. Hidden.
• 또는 가시성: Hidden 및 flex-grow: 10, 대상:last-child를 사용하여 단일 팬텀 항목을 추가합니다.

결과

이 접근 방식을 사용하면 플렉스 항목의 마지막 행이 콘텐츠 너비에 자연스럽게 정렬되어 이전에 관찰된 과도한 늘어짐이 제거됩니다. 원하는 정렬 동작을 그대로 유지하면서 컨테이너 공간이 효과적으로 채워집니다.

위 내용은 마지막 행의 Flexbox 항목을 원래 너비에 맞춰 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!