[트러블슈팅] justify-content: center를 사용했는데 화면이 줄어들 시 내용물이 잘리는 현상

 

문제 발생

아래는 구현해야할 화면이다. 

 

 

container로 묶여있는 각 1,2,3 박스는 컨첸츠가 들어갈 레이아웃이다. 적응형으로 구현해야하기에 화면이 줄어들어도 각 박스의 width는 유지된 채로 가로 스크롤이 생기게끔 한다. 

container 옆에 사이드바가 생겼다가 사라졌다하며 사이드바의 여부와 상관없이 각 박스들은 container 내부에서 중앙 정렬이 되어야한다. 

 

이를 구현한 코드는 아래와 같다.

<div class="container">
 <div class="box box1">1</div>
 <div class="box box2">2</div>
 <div class="box box3">3</div>
</div>

.container{
  display: flex;
  justify-content: center;
  width: 100%;
  gap:10px;
}
.box{
  height: 300px;
  flex-shrink: 0;
}
.box1{
  width: 300px;
  background-color: pink;
}
.box2{
  width: 500px;
  background-color: aqua;
}
.box3{
  width: 200px;
  background-color: green;
}

 

 

flex를 이용하여 container 내부의 box들을 정렬시켰고, 각 box는 화면이 줄어들 때 flex에 의해 크기가 줄어드는 것을 막기 위해 flex-shrink: 0을 설정하였다. 

또한 container의 width를 100%로 잡고 justify-content: center를 사용하여 옆에 사이드바가 있든 없든 container 내부는 중앙정렬 될 수 있게 작성하는 것을 마지막으로 턴을 마치고 원하는 대로 작동되는지 테스트를 진행해봤다.

나머지는 전부 원하는대로 구현되었지만 딱 하나, 화면이 줄었을 때 문제가 있었다.

 

 

 

 

위와 같이 화면이 줄어들었을때 box들은 각 크기를 유지한 채 박스들의 크기 만큼 가로 스크롤이 생길거라 생각했는데, 위와 같이 각 양 옆 박스가 잘리는 모습이 나타났다. 살펴보면 박스는 여전히 본인의 크기를 유지하고 있지만 그냥 화면에 잘려있을 뿐이다.

 

 

 

원인 분석

이에 대한 문제는 justify-content: center에 있었다. 정확히 표현하면 justify-content가 문제가 아니라 정렬에 대한 css의 이해가 부족했던 것이다. 여기서 말하는 정렬은 flex, grid같은 정렬 할 수 있는 css이 종류를 말하는 것이 아닌 start, end, center과 같은 정렬 그 자체를 말하는 것이다.

css3에서는 정렬되는 item들이 container보다 크면 기본적으로 overflow 된다. 예를 들 수 있는 것이 위와 같은 문제이다.

위의 상황에서는 box들은 각 크기를 가지고 있고 container의 크기는 100%로 하여 화면 크기를 기준으로 가져갔다. 화면이 풀페이지일 때는 container의 크기가 box들보다 크니 문제가 없었지만 화면을 점차 줄여나가면 어느순간부터 container의 크기가 box보다 작아져버린다. 그리고 말했듯 container의 크기보다 item의 크기가 더 크게되면 item들은 overflow로 잘려버려 위와 같은 문제가 발생한다.

 

 

 

 

해결 방안

container 안의 item들의 위치를 조정하는 justify-content와 align-content에 위와 같은 이슈를 제어하기 위해 safe와 unsafe라는 속성이 존재한다. 

safe는 사용자가 보이는 화면을 기준으로 하여 정렬이 될 수 있도록 하고, unsafe는 뷰포트 전체를 고려한 화면의 전체 영역을 기준으로 정렬하여 아이템을 배치한다.

따라서 콘텐츠가 가려지지 않도록 설정하려면 safe 속성을 사용하여야 할 것이다. 

// 사용 예시
justify-content: safe center;
align-content: safe center;

 

참고로 위 속성이 모든 브라우저에서 적용되는지는 모르겠다. 혹시라도 적용이 안된다면 내가 찾은 방법 중 이 주소에 들어가서 따라하면 해결될 것이다.

 

 

---

참고 문서

• CSS Box Alignment Module Level 3 - https://www.w3.org/TR/css-align-3/#overflow-values