Flexbox Wrap을 사용할 때 마지막 Flex 항목이 중앙에 배치되는 것을 방지하는 방법은 무엇입니까?

Flexbox 래핑을 변경하는 방법

이 반응형 Flexbox 시나리오에서는 화면 크기가 작아짐에 따라 Flex 항목이 점진적으로 래핑됩니다. 래핑 동작을 미세 조정하기 위해 왼쪽부터 시작하여 마지막 플렉스 항목을 중앙에 유지하는 방법을 살펴보겠습니다.

Ghost Elements 구현:

CSS can 마지막 줄의 나머지 공간을 차지하기 위해 "유령" 요소를 만드는 데 사용됩니다. 예를 들어 잠재적인 열 길이가 4라고 가정하면 3개의 고스트 요소가 필요합니다.

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

의사 요소:

의사 요소도 사용할 수 있습니다. 2에 필요한 유령 요소 수:

::after {
    content: "";
    flex: 1;
}

수정됨 예:

다음은 고스트 요소가 추가된 코드의 업데이트된 버전입니다.

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

이러한 개선 사항을 통해 플렉스 항목은 원하는 대로 마지막 2개 항목으로 래핑됩니다. 중심이 없고 왼쪽부터 시작됩니다.

위 내용은 Flexbox Wrap을 사용할 때 마지막 Flex 항목이 중앙에 배치되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!