自動換行佈局

Question

有一個佈局需求:
類似表格佈局, 單元格固定大小, 在容器寬度發生變化時, 如果一行的寬度如果不夠, 多出的單元格自動換行, 但同時每一行的單元格都需要平均分配一行的寬度大小.

這個是用js寫的效果, 請問如何只使用css3來達到同樣的效果.
codepen鏈接(需要手動調整窗口大小來查看效果):
https://codepen.io/darcrand/f...

2018-08-12 補充:
非常感謝各位的回答, 可能是我的沒有把問題描述清楚, 下面我將代碼貼出:

dom部分

<div class="box">
  <div class="cell">
    <div class="content">A</div>
  </div>
  <div class="cell">
    <div class="content">B</div>
  </div>
  <div class="cell">
    <div class="content">C</div>
  </div>
  <div class="cell">
    <div class="content">D</div>
  </div>
  <div class="cell">
    <div class="content">E</div>
  </div>
  <div class="cell">
    <div class="content">F</div>
  </div>
  <div class="cell">
    <div class="content">G</div>
  </div>
  <div class="cell">
    <div class="content">H</div>
  </div>
  <div class="cell">
    <div class="content">I</div>
  </div>
  <div class="cell">
    <div class="content">J</div>
  </div>
  <div class="cell">
    <div class="content">K</div>
  </div>
  <div class="cell">
    <div class="content">L</div>
  </div>
</div>

css部分

.box {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  box-sizing: border-box;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  font-size: 32px;
  font-weight: bold;
  background-color: rgb(37, 180, 144);
}

js部分

const cells = document.querySelectorAll('.cell')

function getStyle(ele) {
  return ele.currentStyle ? ele.currentStyle : window.getComputedStyle(ele, null)
}

function resize() {
  const boxWidth = parseInt(getStyle(document.querySelector('.box')).width, 10)
  const padding = 10
  const cellMinWidth =
    parseInt(getStyle(document.querySelector('.content')).width, 10) + 2 * padding
  const eachLineCount = Math.floor(boxWidth / cellMinWidth)
  const percent = Math.floor(100 / eachLineCount * 100) / 100
  cells.forEach(ele => {
    ele.style.width = `${percent}%`
  })
}

resize()
window.addEventListener('resize', resize)

首先我已經使用了flex佈局, 其次使用justify-content: center時, 會出現問題:
儅最後一行的單元格數量小於其他行的時候, 其中的單元格的位置佈局就會跟其他行的不一樣, 沒有左對齊.

Answer 1

可以使用css3的flex布局

Answer 2

这样写就可以了：

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

演示代码见如下：

三十客 - 一个Flexbox布局

【基础知识】Flex-弹性布局原来如此简单

Answer 3

弹性盒模型
display：flex
flex-wrap：wrap