Flex 항목을 래핑할 때 마지막 행에서 원하지 않는 여백을 제거하는 방법은 무엇입니까?

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

Flexbox 레이아웃으로 작업할 때 Flex 항목의 마지막 행이 컨테이너의 flex 항목에는 CSS 클래스에서 상속된 마지막 항목으로 인해 원치 않는 아래쪽 여백이 있습니다. 태그 목록이 동적일 때 이는 어려운 일이 되며 인덱스(예: 항목-13, 항목-14 등)를 기반으로 특정 항목을 타겟팅하는 것이 비현실적입니다.

해결책

Flexbox는 항목의 마지막 행에서 여백을 제거하는 직접적인 방법을 제공하지 않습니다. 그러나 몇 가지 대체 접근 방식도 있습니다.

1. 간격 속성 사용

최신 브라우저에서는 CSS 간격 속성을 사용하여 플렉스 항목 사이에 공간을 만들 수 있습니다. 간격 값을 설정하면 모든 플렉스 항목 사이에 자동으로 공간을 추가할 수 있어 여백이 필요하지 않습니다.

.container {
  ...
  gap: 5px;                          /* added */
}

2. 행 기반 선택

태그 목록이 알려진 높이를 가진 다른 컨테이너의 하위인 경우 CSS nth-child() 선택기를 사용하여 마지막 행에서 아래쪽 여백을 선택적으로 제거할 수 있습니다.

.container .tags li:nth-child(12n) {
  margin-bottom: 0;
}

3. 계산된 너비 자식

어떤 경우에는 각 자식의 너비를 계산하여 플렉스 컨테이너에 추가하는 것이 가능할 수도 있습니다. 이렇게 하면 컨테이너가 하위 항목을 균등하게 래핑하여 명시적인 여백이 필요하지 않게 됩니다.

.container {
  ...
  display: flex;
  flex-wrap: wrap;
  width: 100%;  /* width based on child count and their individual widths */
}

.tag {
  width: 20%;
}

참고: gap 속성은 Chrome, Firefox 및 원정 여행. 지원되지 않는 브라우저에서는 0으로 돌아갑니다.

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