Challenges

flex vs flex-inline

나는 body를 flex 컨테이너로 만들어서 세로 정렬을 사용하여 가장 큰 단위의 배열을 하였다.

body {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

이후 문제없이 나머지 html과 css를 마크업하였는데, 모바일에서 포트폴리오를 열어봤을 때 문제가 생겼다.

Issue

분명 데스크탑으로 봤을 떄는 문제가 없었는데 모바일에서 여니깐 전체적으로 body내의 element들이 왼쪽으로 쏠려 있고, 오른쪽에 margin이 더 생겨보이는 현상이 생겼다.

처음에는 body가 view width에 100%로 안차서 생기는 문제인가 하였는데, body에 색깔을 넣어서 확인해 보니깐 이상한 margin 없이 정상적으로 꽉 차 있었다.
이후 구글링을 통해 min-width: 100%등을 시도해 보았지만 변화는 없었다.

Solution

여러개를 시도해 보던 중 body를 inline-flex 로 만들었더니 문제가 해결되었다.

flex vs inline-flex

flex와 inline-flex는 컨테이너가 아이템을 정렬하는 방식에서 차이가 있는 것이 아니라 컨테이너가 다른 요소들과 배치되었을 때 차이가 생긴다. 말 그대로 inline-flex는 컨테이너가 inline 요소처럼 배치되고, flex는 컨테이너가 block 요소처럼 배치된다.

???

결과적으로 나의 문제는 body를 inline 요소처럼 배치하여서 문제가 해결되었다. 근데 왜 해결된걸까? 애초에 body는 html안에 홀로 존재(head가 존재하지만, 보이는 것에 영향을 미치지 않으니)하는데 이것이 inline일떄랑 아닐 때에 왜 보이는게 달라지는지 도저히 모르겠다.

혹시 위 내용에 대해 아시는 분께서는 답글을 통해 알려주시면 너무 감사하겠습니다.😃

Side Effect

이제 문제를 해결하고 이후 모바일에 맞게 media query를 작성하고 desktop으로 다시 웹사이트를 확인하였는데, 새로운 문제가 생겼다.


desktop으로 웹사이트를 보았을 때 body가 전체 viewport에 꽉 차지 않고 왼쪽에 정렬된 현상이 보였다. 이를 해결하기 위하여서 media query에 width가 800px 이상(desktop)일때는 body의 display를 flex로 하였다.

@media screen and (min-width: 800px) {
  body {
    display: flex;
  }