[CSS] Flexbox의 반환 구성, 1 시에만 중앙에 배치하는 방법

요구 사항

Flexbox의 반환 목록에서 목록 항목이 하나만 있는 경우 Flexbox의 기본 왼쪽 정렬이 아닌 중앙 정렬의 디자인을 원합니다.

코드

pug

.bg
  section
    h2 wrap(1)
    .wrap
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")

  section
    h2 wrap(2)
    .wrap
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")

  section
    h2 wrap(3)
    .wrap
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")

  section
    h2 wrap(4)
    .wrap
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")
      .itemWrap
        img.item(src="https://placehold.jp/150x150.png")

scss

// 装飾
.bg {
  color: #fff;
  background: #444;
  max-width: 600px;
  margin: 0 auto;
}
section {
  margin-bottom: 80px;
}
.item {
  width: 100%;
  display: block;
}

//メイン
.wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}
.itemWrap {
  box-sizing: border-box;
  flex-basis: 50%;
  padding: 20px;
   &:first-child {
    margin-right: auto;
    margin-left: auto;
  }
}

해설

기본

이전에는 소개된 공백을 지능적으로 기술하는 방법을 사용했다.
https://qiita.com/dorara/items/89364b0ab9e9d5d5c7b7

flex의 바깥쪽 랩을 걸다

.wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}

공백을 확보하기 위해padding을 사용했기 때문에, justify-content 기본값을 유지합니다.flex-wrap의 반환 on.(기본값은off
가로로 채워진 음수 여백을 제거합니다.

프로젝트별 wrapper

.itemWrap {
  box-sizing: border-box;
  flex-basis: 50%;
  padding: 20px;
}

유연한 계산의 div.항목 (이번 이미지) 을 둘러싸고, 너비% 로 지정하고 padding 공백을 확보합니다.
한쪽의padding-left+다른 한쪽의padding-right 제작 프로젝트의 가로 공백 때문에padding의 값은 사이의 거리/2이다.

첫 번째 margin:auto만 있습니다.

 &:first-child {
    margin-right: auto;
    margin-left: auto;
  }

그리고 itemWrap의 첫 번째 정도만margin을 auto로 설정합니다.
2개 이상의 경우wrap의 폭이 itemWrap의 요소를 덮어씌우기 때문에 margin:auto 발동하지 않고 1개의 단일체만 정심한다.

구현 예