CSS flex로 아이템들을 가운데 정렬 시도

우선 flexbox로 아이템들을 가운데 정렬하는 것은 간단했다

 

display: flex를 선언하고

justfy-content: space-between이나 center를 선언하면

아이템들이 가운데로 정렬된다.

  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  // justify-content: center;

 

.container {
  width: 30vw;
  height: 80vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  // justify-content: center;
  > .card {
    margin: 10px;
    width: 100px;
    height: 150px;
  }
}

 

 

하지만 이렇게 해도 마음에 들지 않았다.

우선 justfy-content: space-between를 사용하면

아래와 같이 아이템들이 정렬되는 경우가 생겼고

 

justfy-content: center를 사용하면

아래와 같이 아이템들이 정렬되었다

 

내가 원하는 정렬은

아래와 같이 가운데 정렬이 되면서 차곡차곡 쌓여가는 그림이었다.

 

justfy-content: flex-start로 정렬하면 위와 같이 나오지만

container가 반응형의 디자인을 사용했을 경우

아래처럼 우측에 빈 여백이 남게 된다.

그렇다면 justfy-content: flex-start로 정렬하고 남는 여백은 직접 계산해서

가운데 정렬이 되도록 container의 padding을 입력할까 생각도 해 봤지만

그럴 경우 배보다 배꼽이 더 큰 것 같았고 그래서 검색을 해보니

이럴 경우는 그냥 grid를 사용해 만드는 것이 좋다는 말을 보았다.

 

그래서 최종적으로 사용한 것은 grid이다.

.container {
  width: 30vw;
  height: 80vh;
  display: grid;
  grid-gap: 10px;
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  > .card {
    margin: 10px;
    width: 100px;
    height: 150px;
  }
}

 

grid를 사용하니 container의 크기가 줄어들거나 커져도

완벽하게 가운데 정렬을 유지하면서 아이템을 차곡차곡 정렬하는 것을 볼 수 있었다.