플렉스 컨테이너 너비를 콘텐츠에 맞추는 방법
기본적으로 display: flex로 설정된 요소는 블록 레벨 특성을 가지기 때문에, 부모 컨테이너의 가용 너비 전체를 차지하게 됩니다. 하지만 경우에 따라 플렉스 컨테이너가 내부 콘텐츠 크기만큼만 너비를 갖도록 만들고 싶을 때가 있습니다.
이럴 때 display: inline-flex를 사용하면 해결할 수 있습니다. inline-flex는 인라인 레벨 요소처럼 동작하면서 내부에는 플렉스 레이아웃을 유지하기 때문에, 컨테이너의 너비가 자동으로 콘텐츠 크기에 맞춰집니다.
적용 예제
아래 코드는 inline-flex를 활용해 박스의 너비를 콘텐츠에 맞게 조정하는 예시입니다:
#box {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 200px;
padding: 10px;
margin: 20px;
background-color: blue;
}코드 설명
- display: inline-flex; — 요소를 인라인 플렉스 컨테이너로 만들어, 너비가 콘텐츠 크기에 따라 결정됩니다.
- flex-direction: row; — 자식 요소들을 가로 방향으로 배치합니다.
- flex-wrap: wrap; — 공간이 부족할 때 자식 요소들이 다음 줄로 넘어갑니다.
- max-width: 200px; — 콘텐츠가 아무리 많아도 최대 너비는 200px로 제한됩니다.
이처럼 inline-flex를 사용하면 별도의 width 속성 지정 없이도 플렉스 컨테이너가 콘텐츠에 딱 맞는 너비를 가질 수 있습니다. 만약 여러 개의 박스를 한 줄에 나란히 배치하고 싶다면, 부모 요소에 text-align을 적용하거나 부모 역시 플렉스 컨테이너로 만들어 정렬하는 방법도 함께 고려해 보세요.