Flex 컨테이너 항목 왼쪽 정렬

모바일 메뉴에서는 소셜 미디어 아이콘 목록이 Flexbox를 사용하여 정렬됩니다. 동일한 간격을 보장하기 위해 justify-content: space-around가 사용됩니다. 그러나 행에 3개 이상의 항목이 포함된 경우 왼쪽 정렬 대신 중앙 정렬됩니다.

The Quandary

이 문제는 justify-content: space- 때문에 발생합니다. around는 각 끝에 절반 크기의 공간을 두고 항목을 균등하게 배포합니다. 남은 공간이 음수이거나 단일 항목이 있는 경우 중앙처럼 동작합니다. 이로 인해 주어진 시나리오에서 원치 않는 가운데 정렬 동작이 발생합니다.

해결책

랩에 남겨진 항목을 정렬하려면 justify-content: space-between이 답변. 이 변형은 균일한 배포를 보장하지만 여유 공간이 없거나 줄에 단일 항목이 있는 경우 항목을 왼쪽 정렬하는 flex-start처럼 동작합니다.

샘플 코드

justify-content: space-around를 justify-content: space-between으로 바꾸면 정렬 문제가 해결됩니다. 또한 컨테이너에 왼쪽 및 오른쪽 패딩을 추가하여 주변 공간의 간격 효과를 흉내낼 수 있습니다.

추가 고려 사항

발생할 수 있는 잠재적인 문제는 다음과 같습니다. 두 항목이 포장되어 컨테이너의 반대쪽 끝에 정렬됩니다. 다만, 이를 해결하는 것은 전혀 별개의 문제입니다.