Flexbox는 어떻게 마지막 행의 가변 너비 요소에 대해 양쪽 맞춤을 달성할 수 있습니까?

Flexbox 익히기: 가변 너비 요소에 대한 양쪽 정렬 달성

웹 디자인 영역에서는 요소를 다음과 같이 정렬하는 것이 바람직한 경우가 많습니다. 공간을 최적화하고 시각적으로 즐거운 레이아웃을 만드는 방식입니다. Flexbox는 이 목표를 달성하기 위한 강력한 도구로 등장했지만 특정 시나리오에는 고유한 문제가 발생할 수 있습니다.

유연한 컨테이너에 배열된 가변 너비 항목을 처리할 때 이러한 문제 중 하나가 발생합니다. 각각 이름과 관련 번호가 있는 사용자 목록을 생각해 보세요. Flexbox를 사용하여 래핑하면 이러한 요소가 컨테이너의 전체 너비를 채우도록 확장되어 마지막 줄에 보기 흉한 간격이 생길 수 있습니다.

원하는 동작은 자연스러운 너비를 사용하여 마지막 행의 요소를 정렬하는 것입니다. 다른 모든 행의 요소가 컨테이너의 너비를 완전히 활용하는지 확인합니다. 이를 달성하기 위해 팬텀 아이템과 관련된 기술을 사용할 수 있습니다.

해결 방법: 팬텀 아이템

이 정렬 문제를 해결하는 열쇠는 팬텀 아이템을 도입하는 것입니다. 마지막 행의 마지막 슬롯. 이러한 항목은 visible:hidden을 사용하여 보이지 않게 렌더링되며, flex-grow 속성은 행의 나머지 공간을 채우도록 합니다.

구현

이 솔루션을 구현하려면 , 컨테이너 끝에 가상 항목을 추가할 수 있습니다. 예를 들어, 82명의 사용자 목록을 고려하면 다음 CSS를 사용하여 세 개의 팬텀 항목을 생성할 수 있습니다.

.userlist:after {
    content: "";
    flex: 10 0 auto;
    visibility: hidden;
}

대체 접근 방식은 flex-grow: 10을 사용하여 단일 팬텀 항목을 생성하고 다음을 사용하여 이를 대상으로 지정하는 것입니다. 마지막 자식 또는 :마지막 유형 의사 클래스.

위 내용은 Flexbox는 어떻게 마지막 행의 가변 너비 요소에 대해 양쪽 맞춤을 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!