Flexbox 레이아웃에서 마지막 행 스트레칭을 방지하려면 어떻게 해야 합니까?

마지막 행 Flex 항목의 적절한 크기 조정 및 정렬

사용자 이름과 관련 항목이 포함된 인라인 블록 요소가 있는 시나리오에서 숫자가 일관되지 않은 오른쪽 가장자리로 표시되는 경우 목표는 일관되고 동적인 양쪽 맞춤을 달성하는 것입니다.

Flexbox는 이러한 정렬 문제에 대한 솔루션을 제공합니다. 디스플레이를 적용하여: flex; 플렉스 랩: 랩; 컨테이너 및 flex: 1 0 auto; 요소까지 만족스러운 결과를 얻을 수 있습니다. 그러나 요소의 마지막 줄은 여전히 ​​부자연스럽게 늘어납니다.

이 문제를 해결하고 원하지 않는 늘어짐을 방지하려면 "유령" 항목을 사용하는 기술을 사용할 수 있습니다. 항상 마지막 슬롯을 차지하는 3~4개의 보이지 않는 "팬텀" 항목을 생성하면 마지막 행 요소의 자연스러운 너비가 유지됩니다.

또는 가시성이 있는 단일 "팬텀" 항목을 사용할 수 있습니다. flex-grow: 10. :last-child 또는 :last-of-type 의사 클래스를 사용하여 이 항목을 타겟팅하면 항상 마지막 항목을 차지하게 됩니다. position.

이 기술은 양쪽 정렬과 유사한 동작을 효과적으로 달성하여 요소가 마지막 줄을 과도하게 늘리지 않고 컨테이너의 너비를 채울 수 있도록 하여 시각적으로 보기 좋은 레이아웃을 만듭니다.

위 내용은 Flexbox 레이아웃에서 마지막 행 스트레칭을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!