CSS Flexbox에서 이미지가 가로로 늘어나는 현상 방지하는 방법

CSS Flexbox에서 이미지가 가로로 늘어나는 현상 방지하는 방법

CSS Flexbox 레이아웃에서 이미지가 부모 컨테이너 너비만큼 가로로 늘어나는 문제를 막는 방법을 소개합니다.

Flexbox에는 의외로 당황스러운 기본 동작이 하나 있습니다. 바로 이미지가 부모 컨테이너의 전체 너비만큼 가로 방향으로 늘어나는 것입니다. 예를 들어 flex-direction: column이 적용된 부모 요소(플렉스 컨테이너) 안에 자식 요소(플렉스 아이템)로 이미지가 있다면, 이미지의 원래 높이는 그대로 유지되지만 너비는 부모 컨테이너만큼 늘어나 버립니다.

이 동작은 브라우저마다 기본 CSS 스타일시트(User Agent Stylesheet)가 다르기 때문에 일관적이지 않게 나타날 수 있어 주의가 필요합니다.

다행히 해결 방법은 아주 간단합니다. 이미지(플렉스 아이템)의 align-self 속성 기본값인 stretch를 다른 값으로 바꿔주기만 하면 됩니다.

stretch 대신 center를 사용하면 이미지가 늘어나는 현상이 사라지고, 부모 컨테이너의 세로 중앙에 정렬됩니다.

img {
    align-self: center;
}

예제

부모 요소(플렉스 컨테이너) 1개와 그 안에 자식 이미지 요소(플렉스 아이템) 2개가 있는 CSS 예제를 살펴보겠습니다.

• 첫 번째 이미지는 브라우저 기본값인 align-self: stretch가 적용되어 가로세로 비율이 깨집니다.
• 두 번째 이미지에는 align-self: center 선언이 포함된 유틸리티 클래스 .self-center를 추가해 늘어남을 제거했습니다.

https://codepen.io/StrengthandFreedom/pen/qBBoMOX

문제가 깔끔하게 해결되었습니다!

참고로 이미지를 부모 컨테이너의 상단에 세로 정렬하고 싶다면 flex-start 값을 사용할 수도 있습니다.

img {
    align-self: flex-start;
}

두 방법 모두 이미지에서 stretch 효과를 제거한다는 점은 같습니다. flex-start와 center 중 무엇을 사용할지는 이미지를 어떻게 배치하고 싶은지에 따라 선택하면 됩니다.

알아두면 좋은 점

플렉스 아이템은 기본적으로 align-self: stretch 값을 가집니다. 따라서 플렉스 아이템(자식 요소)이 이미지든 다른 HTML 요소든, 별도 설정 없이는 모두 가로 방향으로 늘어난다는 점을 기억해 두세요.