Flexbox 자식 주위에 공간을 균등하게 분배할 수 있습니까?

Flex 항목 간의 균등한 공간: 종합 가이드

Flexbox 하위 항목에 공간을 균등하게 분배할 수 있습니까?

평등 달성 Flexbox 자식 주위의 간격은 여러 접근 방식으로 달성할 수 있습니다.

Justify-Content: Space-Around

질문에서 언급했듯이 justify-content: space-around는 배포합니다. 항목 주위에 동일한 공간을 두고 고르게 배치합니다. 그러나 이로 인해 항목 각 측면의 추가 공간으로 인해 시각적 간격이 고르지 않을 수 있습니다.

전체 브라우저 지원 솔루션: 의사 요소

최신 브라우저는 의사 요소를 인식합니다. -플렉스 항목으로 플렉스 컨테이너의 요소. ::before 및 ::after 의사 요소를 컨테이너에 추가하고 너비가 0인 의사 요소와 함께 justify-content:space-between을 설정하면 표시되는 플렉스 항목의 간격을 균등하게 지정할 수 있습니다. 이 방법은 모든 주요 브라우저에서 지원됩니다.

코드 예

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

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

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

이 방법은 첫 번째 항목과 마지막 항목을 포함하여 항목 사이에 동일한 간격을 제공합니다.

위 내용은 Flexbox 자식 주위에 공간을 균등하게 분배할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!