Flex 항목을 래핑할 때 아래쪽 여백을 제거하는 방법은 무엇입니까?

Flex 항목을 래핑할 때 여백 제거

Flexbox로 작업할 때, 특히 생성할 때 연속된 마지막 항목에서 아래쪽 여백을 제거해야 하는 경우가 많습니다. 특정 항목을 타겟팅하는 것이 불가능한 동적 목록입니다. 이로 인해 서로 다른 행의 항목 사이에 간격이 고르지 않게 될 수 있습니다.

이러한 맥락에서 Flexbox는 행 내 항목의 위치를 ​​기반으로 CSS 스타일을 수정하는 고유 기능을 제공하지 않습니다. 그러나 원하는 효과를 얻기 위한 대체 접근 방식이 있습니다.

간격 속성 사용

CSS는 플렉스 항목 사이에 공간을 추가하는 데 사용할 수 있는 간격 속성을 도입했습니다. 적절한 값으로 설정하면 각 행의 마지막 항목에서 여백을 효과적으로 제거할 수 있습니다. 그러나 이 속성은 이전 브라우저에서는 지원되지 않습니다.

.tags {
  gap: 5px;
}

여백 조정

또 다른 접근 방식은 li 요소의 아래쪽 여백을 수정하는 것입니다. 행. 이를 위해 JavaScript를 활용하여 컨테이너 내의 요소 위치에 따라 스타일을 동적으로 조정할 수 있습니다.

const tags = document.querySelectorAll('.tags li');
tags.forEach((tag, index) => {
  if (index % 4 === 3) {
    tag.style.marginBottom = 0;
  }
});

의사 요소 사용

의사 요소를 사용하여 각 행의 마지막 항목 앞이나 뒤에 있는 보이지 않는 요소에 스타일을 적용합니다. 예를 들어 음수 여백을 설정하여 li에서 여백을 취소합니다. 요소.

.tags li:last-of-type::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: -5px;
}

위 내용은 Flex 항목을 래핑할 때 아래쪽 여백을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!