[CSS] flex 반응형에 따라 박스 떨어뜨리기

조건

1. flex로 1줄 6칸 만들기
2. 768px 일 때 2줄 3칸 만들기

<div class="container">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }

.container {
  display: flex;
  max-width: 1200px;
  height: 200px;
  background: #eaeaea;
  margin: auto;
}
.box { 
  width: 20%;
  border: 1px solid plum;
}

@media all and (max-width: 768px) {
  .container {
	/*flex-wrap: nowrap(default) */
    flex-wrap: wrap;
    background: #777;
  }
  .box {
    width: 33.33%;
    border: 1px solid purple;
  }
}

 

 

 

Reference

https://stackoverflow.com/questions/50591560/issue-with-display-flex-column-count-2