Flex 항목을 래핑할 때 간격을 제거하는 방법은 무엇입니까?

Flex 항목을 래핑할 때 사이의 공간 제거

세로 공간이 충분하지 않을 때 항목이 가로로 흐르는 여러 줄의 Flex 레이아웃을 구현하려고 합니다. . 그러나 열 사이에 간격이 있습니다.

Flex 컨테이너의 초기 설정은 align-content:stretch입니다. 이는 여러 줄로 구성된 컨테이너의 교차 축에 걸쳐 플렉스 항목을 균등하게 배포합니다. 이러한 동작을 방지하려면 컨테이너에 align-content: flex-start를 적용하십시오.

단일 행 플렉스 컨테이너로 작업할 때 align-items 및 align-self를 사용하여 교차 축을 따라 공간을 분배합니다. 그러나 귀하의 경우와 같이 여러 줄로 구성된 컨테이너에서는 align-content 속성을 사용하여 교차 축을 따라 플렉스 라인(행 또는 열)을 배포합니다.

align-content 속성은 다양한 값을 허용합니다. 포함:

• flex-start
• flex-end
• center
• space-between
• space-around
• 스트레치

by 기본값은 스트레치입니다. 즉, 남은 여유 공간이 모든 줄에 균등하게 분할되어 줄이 확장됩니다.

해결책

열 사이의 간격을 없애려면 코드 예제를 수정하세요. CSS:

.container {
  align-content: flex-start;
}

결론

align-content 사용: flex-start는 플렉스 라인이 컨테이너 상단에서 시작하여 추가 간격 없이 아래쪽으로 계속되도록 보장합니다. . 이는 귀하가 찾고 있던 레이아웃과 일치합니다.

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