예측할 수 없는 너비가 있는 마지막 행의 Flex 항목을 완벽하게 정렬하는 방법은 무엇입니까?

마지막 행에서 Flex 항목의 크기를 완벽하게 조정하고 정렬하는 방법

Flex 항목 목록으로 작업할 때 오른쪽 가장자리 정렬에서 불일치가 발생할 수 있습니다. 특히 항목 너비가 예측할 수 없거나 동적일 때. 고정 너비 또는 디스플레이:테이블 기술은 만족스러운 결과를 얻지 못할 수 있지만 정확한 크기 및 정렬 제어를 위해 Flexbox를 사용하는 다음 접근 방식을 고려하세요.

Flexbox를 사용한 솔루션:

1. 표시할 상위 컨테이너 설정: flex; flex-wrap: 랩; 여러 행을 허용합니다.
2. Apply flex: 1 0 auto; 플렉스 항목에 추가하여 필요에 따라 유연하게 만들고 축소합니다.

그러나 이로 인해 마지막 행이 너무 넓게 늘어나는 경우 다음 해결 방법을 구현할 수 있습니다.

팬텀 아이템 요령:

정렬 정렬과 유사한 동작을 달성하려면 다음과 같은 "팬텀" 플렉스 아이템을 만드는 것을 고려하세요. 항상 마지막 슬롯을 차지합니다. 이는 상위 컨테이너에 다음 코드를 추가하여 수행할 수 있습니다.

.parent-container:after {
    content: '';
    flex: 10 0 auto;
}

이 팬텀 항목은 너비를 자동으로 조정하여 마지막 행의 남은 공간을 채우므로 실제 플렉스 항목이 자연스러운 상태를 유지합니다. widths.

구현 예:

주어진 예에서 솔루션을 구현할 수 있습니다. 다음과 같습니다:

.userlist {
    display: flex;
    flex-wrap: wrap;
}

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

이렇게 하면 항상 .userlist 컨테이너의 마지막 슬롯을 차지하는 단일 팬텀 항목이 생성되어 원하는 간격과 정렬이 이루어집니다.

위 내용은 예측할 수 없는 너비가 있는 마지막 행의 Flex 항목을 완벽하게 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!