flex를 이용한 테마이미지 정렬

flex관련 포스팅을 읽고 기존에 어렴풋하게만 이해하고 있던 flex 정렬을 제대로 알고 사용할 수 있게 되었다.
지금 제작하고 있는 방탈출 웹의 home 부분의 테마 이미지를 한줄에 5개씩 나오도록, 간격을 두고 정렬하고 싶은데, 방법이 3가지 있다.

방법1. space-around 이용

.search-bottom{
  border: 1px soloid black;
  height:40vh;
  width: 80vmax;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
}

.search-bottom > .themeImg{
  display: flex;
  flex-direction: column;
}

.search-bottom > .themeImg > img{
  height: 20vh;
  width: 13vw;
  border-radius: 20px;
}

최상단의 flex container에 justify-content를 적용시키면 하위 flex-item들이 원하는 대로 간격을 이룬다. 여러 줄 정렬 할 것이므로 align-content 속성도 주었다.
5개가 넘치면 흐르도록 flex-wrap 속성을 적용시키고,
여러 줄 정렬이 편하도록 전체 flex container 내부의 flex container(img태그 입장에서의 부모요소)에 다시 flex를 준다.
가장 정석적인 방법

방법2. flex-basis 이용

.search-bottom{
  border: 1px soloid black;
  height:40vh;
  width: 80vmax;
  display: flex;
  flex-wrap: wrap;
}

.search-bottom > .themeImg{
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
}

.search-bottom > .themeImg > img{
  height: 20vh;
  width: 13vw;
  border-radius: 20px;
}

말그대로 한줄에 img들이 20%씩 차지하도록 flex-basis를 주었다. 가장 직관적이고 이해하기 쉬운 코드

방법3. margin 주기

.search-bottom{
  border: 1px soloid black;
  height:40vh;
  width: 80vmax;
  display: flex;
  flex-wrap: wrap;
}
.search-bottom > .themeImg > img{
  height: 20vh;
  width: 13vw;
  margin: 2vh;
  border-radius: 20px;
}

flex를 이해 못했을 때 이런 식으로 img 태그에 직접 margin을 주었다. 섬세하게 수정하는 것이 어렵고 비효율적이지만, img바깥의 div태그를 수정하지 않아도 된다는 장점이 있다.