이미지 갤러리에서 Flex 항목 사이에 1px 간격을 달성하는 방법은 무엇입니까?

여백이 있는 이미지 갤러리 Flex 항목의 간격을 조정하는 방법

Flexbox 레이아웃에서 Flex 값이 '0 0 25%'인 항목 너비가 고정되어 있고 줄어들거나 늘어나지 않습니다. 격자형 구조를 유지하면서 이러한 항목 사이에 공간을 추가하려면 여백을 적용할 수 있습니다. 그러나 1% 마진을 적용하면 간격이 너무 커질 수 있습니다.

1px 마진을 달성하려면 플렉스 값 '1 0 22%'를 사용하세요. 이는 flex-basis를 22%로 설정하여 행당 4개의 항목만 있도록 합니다. flex-grow 값은 1로 설정되어 항목이 늘어나 여백에 남겨진 남은 공간을 채울 수 있습니다. 이렇게 하면 항목 사이에 미묘한 1px 간격이 생깁니다.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

위 내용은 이미지 갤러리에서 Flex 항목 사이에 1px 간격을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!