1열 ●개의 요소를 가로 줄이고 싶을 때, width가···, margin가···라고 번거로운 계산을 하는 일 없이, 간단하게 반응형 대응의 가로 줄을 짜는 방법을 메모.

예를 들어 1열 2개의 경우

html

    <div class="itemBox">
      <div class="itemBox__inner">

        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>
        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>
        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>
        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>
        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>
        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>
        <div class="item">
          <div class="itemInner">ITEM</div>
        </div>

      </div>
    </div>

css

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;  
}
.itemBox {
  width: 900px;
  margin: 20px auto;
}
.itemBox__inner {
  display: flex; 
  flex-wrap: wrap;   
  margin: 0 0 0 -60px; 
}
.item {
  width: 50%;
  padding: 0 0 60px 60px;
}
.itemInner {
  color: #FFF;
  height: 200px;
  padding: 20px;
  background-color: #444;
}

포인트

1. box-sizing: border-box;

box-sizing: border-box에서 padding과 border를 폭(width)과 높이(height)에 포함할 수 있다.
padding을 요소와 요소의 여백으로 생각한다.
위의 예에서 말하면

.item {
  width: 50%;
  padding: 0 0 60px 60px;
}

1열 2개 배열… 50%
1열 3개 배열... 33.3%
1열 4개 배열… 25%
1열 5개 배열… 20%

box-sizing: border-box에 대해서는, 이 기사에 알기 쉽게 쓰여져 있다.
h tps://사루와카군. 코 m / HTML-c s / 레후 렌세 / 보 x-시진 g

2. 나란히 하고 싶은 요소의 바로 위에 한 궁리

위의 예에서 말하면

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

display: flex;

바로 아래의 모든 요소를 ​​정렬합니다.
float: left는 필요하지 않습니다.

flex-wrap: wrap;

아이 요소가 100%를 넘었을 경우에 되풀이하게 된다.

margin: 0 0 0 -60px;

.item 왼쪽 padding60px 분의 어긋남을 반환합니다.