Flexbox 컨테이너에서 래핑된 Flex 항목 사이의 간격을 어떻게 제거할 수 있습니까?

래핑된 Flex 항목 사이의 간격 제거

Flexbox를 사용하여 컨테이너 내의 요소를 구성할 때 항목이 여러 줄로 래핑될 때 항목 사이에 간격이 나타날 수 있습니다. . 이 문제를 해결하려면 align-content의 개념을 이해해야 합니다.

align-content: 간격의 핵심

처음에는, 플렉스 컨테이너의 기본값은 align-content: Stretch입니다. 이는 수직 Flex 컨테이너의 수직 간격을 담당하는 교차축을 따라 항목을 고르게 배포합니다. 간격을 없애려면 align-content: flex-start로 이 기본값을 재정의해야 합니다.

Flex 라인 배포

align-content는 여러 줄 flex에 적용됩니다. 추가 공간이 있는 경우 교차축을 따라 플렉스 라인(행 또는 열)을 정렬합니다. 이러한 구별은 개별 플렉스 항목을 한 줄 안에 구체적으로 정렬하는 align-items와 매우 중요합니다.

align-content 설정: flex-start

align-을 설정하여 content: 컨테이너에서 flex-start를 사용하면 플렉스 라인을 사용 가능한 공간의 맨 위로 효과적으로 밀어서 둘 사이의 간격을 제거합니다. 이렇게 하면 항목이 불필요한 분리 없이 수직으로 쌓이게 됩니다.

코드 예

다음은 제공된 코드를 조정하는 방법의 예입니다.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
  align-content: flex-start;
}

align-content:flex-start를 통합하면 래핑된 플렉스 항목 사이에 틈이 없이 깔끔하고 컴팩트한 레이아웃을 얻을 수 있습니다. 결과적으로 원하는 스택 배열이 만들어졌습니다.

위 내용은 Flexbox 컨테이너에서 래핑된 Flex 항목 사이의 간격을 어떻게 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!