Flexbox에서 일관된 간격을 달성하는 방법은 무엇입니까?

Flexbox의 균등한 간격: 간격 메우기

Flexbox의 일반적인 과제 중 하나는 첫 번째 항목과 마지막 항목을 포함하여 항목 간에 동일한 간격을 달성하는 것입니다. 'justify-content:space-around' 속성이 가까워지면서 간격이 고르지 않아 시각적 불균형이 발생합니다.

간격 딜레마 해결

다행히도 균등한 공간 분배를 보장하는 두 가지 효과적인 방법입니다.

방법 1: 의사 요소

최신 브라우저는 ::before 및 ::after 의사 요소를 플렉스 항목으로 처리합니다. 이를 컨테이너에 추가하면 'justify-content: space-between'을 활용하여 등간격 환상을 만들 수 있습니다. 의사 요소는 너비를 0으로 차지하므로 표시되는 플렉스 항목 사이에 동일한 공간을 남겨 둡니다.

HTML 코드:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS 코드:

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before,
flex-container::after {
  content: "";
}

방법 2: 오프셋 간격

또 다른 방법은 여백이나 패딩을 사용하여 오프셋 간격을 만드는 것입니다. 이 접근 방식은 여러 브라우저에서 더 일관되게 작동하지만 추가 CSS 조정이 필요할 수 있습니다.

HTML 코드:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS 코드:

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

/* Remove margin from first and last items */
flex-container > :first-child {
  margin-left: 0;
}
flex-container > :last-child {
  margin-right: 0;
}

두 가지 방법 모두 플렉스 항목 사이의 간격을 효과적으로 균등화하여 균일한 시각적 효과를 제공합니다. 배열.

위 내용은 Flexbox에서 일관된 간격을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!