마지막 줄에서 이상한 Flexbox 줄바꿈을 어떻게 제어할 수 있나요?

Flexbox 래핑 동작을 제어하는 ​​방법

문제

반응형 Flexbox 레이아웃을 만들 때 마지막 몇 개의 항목이 이상하게 래핑되는 경우가 발생할 수 있습니다. 이전 줄에 너무 많은 공간을 남겨두었습니다. 예를 들어, API 호출을 기반으로 동적으로 렌더링되는 카드 그리드에서 마지막 두 카드를 왼쪽에서 감싸서 중앙에 맞추는 대신 이전 카드와 정렬되도록 하려고 합니다.

해결책

CSS를 통해 Flexbox 래핑 동작을 수정하여 원하는 정렬을 얻을 수 있습니다. 두 가지 일반적인 접근 방식은 다음과 같습니다.

'고스트' 요소 사용

눈에 보이는 콘텐츠가 없는 '고스트' 요소를 만듭니다. 이러한 요소는 마지막 줄을 효과적으로 채우고 후속 카드를 다음 행으로 밀어 넣습니다. '고스트' 요소의 수는 의도한 열 길이에 해당합니다.

예를 들어 잠재적인 열 길이가 4인 경우 3개의 '고스트' 요소가 필요합니다. CSS 사용:

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

:after 의사 요소 사용

또는 CSS 의사 요소 ::after를 사용합니다. 이 접근 방식은 필요한 '고스트' 요소의 수를 줄입니다.

.card::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
}

이 의사 요소는 마지막 줄의 남은 공간을 채우는 자리 표시자 역할을 합니다.

다음 중 하나를 구현하여 이러한 기술을 사용하면 Flexbox 레이아웃의 래핑 동작을 조정하여 화면 크기나 렌더링된 카드 수에 관계없이 마지막 항목이 적절하게 정렬되도록 할 수 있습니다.

위 내용은 마지막 줄에서 이상한 Flexbox 줄바꿈을 어떻게 제어할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!