[CSS] flex로 여러 항목을 배열하고 싶을 때 공백을 지능적으로 기술하는 방법.

선배의 코드를 보고 기억한 팁.
Flex를 사용하여 다음 가로 배열 항목의 페이지를 만듭니다.

나는 대략 그림 같은 것을 안에 넣는divwrap에 flex를 걸고 싶다.

.flexWrap {
  display: flex;
  flex-wrap: wrap;
  .flexItem {
    flex-basis: 50%;
  }
}

이때 나는 대부분의 프로젝트 사이에 공백이 있다고 생각한다. 그러면 어떻게 설치했는가.

코드

.flexWrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  @media print, screen and (min-width: 767px) {
    margin: 0 -20px;
  }
  .flexItem {
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 10px;
    @media print, screen and (min-width: 767px) {
      flex-basis: 33.3%;
      max-width: 33.3%;
      padding: 20px;
    }
    img {
      max-width: 100%;
    }
  }
}

항목 사이에/2의 항목을 남깁니다.(20px면 10px
좌우 음수 간격은 랩입니다.
음변거리에 따라 오목한 부분을 채워서 복원한다.
답장 시 공백과 공백만 덮어쓰면 됩니다!
응, 똑똑해!
자세한 내용은 codepen 을 참조하십시오.
See the Pen sample-flex-margin by dorara. ( @dorara_css )
on CodePen .