래핑이 발생할 때 Flex 항목이 왼쪽 대신 가운데에 정렬되는 이유와 이를 해결하는 방법은 무엇입니까?

Flex 항목: 중앙 정렬 대신 왼쪽 정렬

이 시나리오에서는 다음을 사용하여 소셜 미디어 아이콘을 3줄로 표시하는 것을 목표로 합니다. 모바일 메뉴 내의 플렉스 기반 ul 요소. 원하는 정렬은 동일한 간격으로 나란히 정렬됩니다. 나란히 배치한 경우 추가 아이콘을 추가하면 문제가 발생하여 다음 행이 왼쪽이 아닌 가운데에서 정렬됩니다.

해결책:

이 정렬 문제를 해결하려면 justify-content: space-around 규칙을 justify-content로 바꾸세요. space-between.

설명:

Flexbox 사양에 따르면 justify-content: space-around는 절반 크기의 공백을 사용하여 라인을 따라 Flex 항목을 균등하게 배포합니다. 어느쪽이든 끝. 그러나 단일 플렉스 항목만 있거나 음수 남은 공백이 있는 경우 중앙과 동일하게 동작하므로 두 행에 세 개의 항목이 있는 경우에만 원하는 동작이 발생합니다.

반대로 justify-content: space -between은 추가 끝 공간을 추가하지 않고 플렉스 항목을 균등하게 배포합니다. 플렉스 항목이 하나만 있거나 남은 공백이 없으면 기본적으로 플렉스 시작으로 설정되어 플렉스 항목을 왼쪽부터 정렬합니다.

사이 공백을 활용하면 플렉스 항목이 항상 왼쪽으로 정렬됩니다. 단일 행과 래핑된 행 모두에 대해 원하는 동작입니다.

위 내용은 래핑이 발생할 때 Flex 항목이 왼쪽 대신 가운데에 정렬되는 이유와 이를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!