[CSS] flex 사용해서 상자 나열하기

만들고 싶은 도안

네모박스 flex 써서 나열하기

HTML

      <!-- 정사각형 -->
      <div class="square-flex">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
      </div>

정사각형 6개를 준비해준다.

그리고 flex 는 부모에다가 적용하는 것이므로

부모 태그(square-flex)도 하나 생성해줌.

CSS

/* 정사각형 */
.square {
  width: 375px; /* 너비 설정 */
  height: 375px; /* 높이 설정 */
  border-radius: 32px; /* 모서리 둥글게 처리 */
  border: 2px solid #ffbe01;
  margin: 50px;
}
.square-flex {
  display: flex;
  /* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

초기 도안.

위에 사각형 3개하고

밑에 사각형 3개 간격차이를 좁히고 싶음.

좁힌 모습

CSS 수정

/* 정사각형 */
.square {
  width: 375px; /* 너비 설정 */
  height: 375px; /* 높이 설정 */
  border-radius: 32px; /* 모서리 둥글게 처리 */
  border: 2px solid #ffbe01;
  margin: 37px 50px;
}
.square-flex {
  display: flex;
  /* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 37px; /* 네모 위에 상단 떨어지게 하기. */
}

---

화면 줄인 모습..

조금 맘에 들지는 않음

그리고 화면 확대할 시 정사각형 모양 유지 안함.

mediaquery 수정

/* media query */
@media screen and (max-width: 1200px) {
  .wrapper {
    max-width: auto;
  }
  .navbar a {
    font-size: 22px;
  }
  .slide-box img {
    max-width: 820px;
    /* overflow: hidden; */
  }
  .square {
    width: 25vw; /* 화면이 600px 이하일 때 너비와 높이를 25%로 변경 */
    height: 25vw;
    margin: 15px; /* 더 작은 간격으로 변경 */
    border-radius: 32px;
  }
}
@media screen and (max-width: 992px) {
  .square {
    width: 25vw; /* 화면이 600px 이하일 때 너비와 높이를 25%로 변경 */
    height: 25vw;
    margin: 15px; /* 더 작은 간격으로 변경 */
    border-radius: 20px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    min-width: 200px;
  }
  .navbar li {
    display: none;
  }
  .square {
    width: 30vw; /* 화면이 600px 이하일 때 너비와 높이를 30%로 변경 */
    height: 30vw;
    margin: 15px; /* 더 작은 간격으로 변경 */
    border-radius: 20px;
  }
}

/* 정사각형 */
.square {
  width: 375px; /* 너비 설정 */
  height: 375px; /* 높이 설정 */
  border-radius: 32px; /* 모서리 둥글게 처리 */
  border: 2px solid #ffbe01;
  margin: 40px;
}
.square-flex {
  display: flex;
  /* justify-content: space-around; 정사각형들이 화면 전체에 고르게 분포하도록 함 */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 37px; /* 네모 위에 상단 떨어지게 하기. */
}