전제

Sass의 SCSS 기법을 사용한다.

index.html

<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

style.scss

.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 30%;
  background: skyblue;

  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: blue;
  }
}

하늘색의 범위는 화면 폭에 따라 30%로 되어 있기 때문에 가변적이다.
여기서 실현하고 싶은 것은

푸른 원이 등 간격으로 정렬

하늘색 사각형의 좌우에 푸른 원과의 간격이 없도록 한다

하단의 푸른 원은 상단의 간격에 맞게 왼쪽으로 채워집니다

화면 너비를 변경해도 위의 조건을 충족시킵니다.

시행착오 ① justify-content로 어떻게든 하고 싶었다

style.scss

.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 30%;
  background: skyblue;

  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: blue;
  }
}

justify-content: space-between; 추가.



◎조건을 만족하는 항목

푸른 원이 등 간격으로 정렬

하늘색 사각형의 좌우에 푸른 원과의 간격이 없도록 한다

× 충족되지 않은 항목

하단의 푸른 원은 상단의 간격에 맞게 왼쪽으로 채워집니다

↑를 채우려면, justify-content에서는 무리할 것 같다.

시행 착오 ② 미디어 쿼리로 열심히

미디어 쿼리로 청원의 폭을 화면 사이즈에 맞추어 바꾼다.

style.scss

.wrap {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  width: 30%;
  background: skyblue;

  .circle {
    width: calc(100% / 3);
    height: 80px;
    border-radius: 50%;
    background: blue;

    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }
  }
}

화면 폭을 변경해도, 조건을 만족하는 배치가 되었다!

화면 폭 1500px까지 밖에 쓰지 않으므로 더 늘리고 싶습니다 ...
하지만 일일이 쓰는 귀찮기 때문에 ↓

Sass에서 for 문장 쓰기

style.scss

    @media screen and (max-width: 900px) and (min-width: 701px){
      width: calc(100% / 4);
    }

    @media screen and (max-width: 1100px) and (min-width: 901px){
      width: calc(100% / 5);
    }

    @media screen and (max-width: 1300px) and (min-width: 1101px){
      width: calc(100% / 6);
    }

    @media screen and (max-width: 1500px) and (min-width: 1301px){
      width: calc(100% / 7);
    }

위에서 꾸준히 쓴 이 코드를 Sass for 문을 사용하여 써본다.

다음에 계속된다. htps : // 코 m / 메이 0210 / ms / e d468882579 6d3d902 에