첫 번째 항목과 마지막 항목을 포함하여 Flex 항목 사이에 동일한 간격을 확보하려면 어떻게 해야 합니까?

Flex 항목 간의 동일한 간격

문제

justify-content가 설명된 이전 기사에서 강조한 것처럼 Flexbox 하위 항목 주위에 동일한 간격을 달성하는 것은 어려운 일입니다. : 공간 주변은 불완전한 솔루션으로 제시됩니다. 이 기사에서는 첫 번째 항목과 마지막 항목을 포함하여 동일한 간격을 보장하는 보다 포괄적인 방법을 살펴봅니다.

해결책

의사 요소

최근 브라우저 발전 의사 요소(::before 및 ::after)가 Flex 컨테이너 내에서 Flex 항목으로 처리되도록 허용합니다. 이는 동일한 간격을 만드는 새로운 가능성을 열어줍니다.

컨테이너에 ::before 및 ::after 의사 요소를 추가하고 너비가 0인 의사 요소와 함께 justify-content: space-between을 활용하면, 눈에 보이는 플렉스 항목 사이에 간격이 동일하다는 환상을 만들 수 있습니다.

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

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

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

위 내용은 첫 번째 항목과 마지막 항목을 포함하여 Flex 항목 사이에 동일한 간격을 확보하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!