Shorts

페이지 글 중앙 스타일은 flex 가 아니다

1 minute read
2024-07-11

css 에 엄청 미숙할 때 flex 로 하면 되는 걸로 알기만 했었다. 하지만 실제 마크업을 진행하다보니 아니었다.


#root {
  display: flex;
  justify-content: center;
}


그러더니 너비가 홀쭉이가 되버렸다.


image-20240713132052520


아주 간단한 방법은


#root {
  width: 100%;
}
 
.container {
  width: 700px;
  margin: 0 auto;
}


하지만 이렇게 하면 너비가 좁을 때 요소가 뷰포트를 튀어나가게 된다. 왜냐면 너비 고정 이기 때문이다.


이를 개선하기 위해서는 미디어쿼리를 사용해서 반응형으로 처리한다.


media query
@media and (max-width: 760px) {
  .container {
     width: 100%;
     padding: 0px 24px; 
  }
}
 
.container {
  width: 700px;
  margin: 0px auto;
}