포장된 Flex 항목에서 원치 않는 아래쪽 여백을 제거하는 방법은 무엇입니까?

래핑 후 Flex 항목에서 여백을 제거하는 방법

Flexbox에서는 래핑된 줄의 마지막 항목이 아래쪽 여백을 유지하는 상황이 발생할 수 있습니다. 원하지 않는 공백. Flexbox로 스타일을 지정한 태그 목록이 동적으로 생성되면 "item-13"과 같은 특정 항목을 타겟팅하는 것은 실용적이지 않습니다.

다행히도 Flexbox는 수동 타겟팅에 의지하지 않고 이 문제를 해결할 수 있는 옵션을 제공합니다.

업데이트(2021): 최신 브라우저는 Flexbox의 gap 속성을 지원합니다. 이 속성은 Flex 항목 사이에 수평 및 수직으로 간격을 추가합니다. 하단 여백을 제거하려면 간격을 원하는 값으로 설정하세요.

.tags {
  gap: 5px;
}

레거시 브라우저(2021년 이전):

nth-child 사용 :

nth-child() 선택기를 사용하면 요소 기반을 타겟팅할 수 있습니다. 목록에서 자신의 위치에 있습니다. 그러나 마지막 항목의 위치가 다를 수 있으므로 동적 목록에서는 이 방법을 신뢰할 수 없습니다.

마지막 n번째 유형 사용:

더 보기 강력한 접근 방식은 nth-child() 선택자 뒤에 :last-of-type을 사용하는 것입니다. 이렇게 하면 컨테이너 내에서 특정 유형의 마지막 요소를 타겟팅할 수 있습니다.

li:nth-child(n+0):last-of-type {
  margin-bottom: 0;
}

디스플레이 수정:

또는 다음의 디스플레이 모드를 변경할 수 있습니다. flex에서 inline-flex까지 내부 목록 요소. 이 옵션은 기본적으로 모든 여백을 제거하고 항목 사이에 간격을 추가합니다.

.tag {
  display: inline-flex;
  margin: 0 5px 5px; /* Unnecessary now */
}

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