需求

现要求一行排列6个div，每个div之间的距离均匀分布，适配pc端各种分辨率

技术点

flex + 百分比布局

实现

html

<div class="root">
  <div class="operate">
    <button>新增</button>
  </div>
  <div class="list">
    <div class="list-wrapper">
      <div class="list-item">1</div>
      <div class="list-item">2</div>
      <div class="list-item">3</div>
      <div class="list-item">4</div>
      <div class="list-item">5</div>
      <div class="list-item">6</div>
      <div class="list-item">7</div>
      <div class="list-item">8</div>
      <div class="list-item">9</div>
    </div>
  </div>
  <div class="pagination">分页器</div>
</div>

css

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

/*根节点样式*/
.root {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/*操作按钮栏样式*/
.root > .operate {
  width: 100%;
  text-align: right;
  padding: 10px;
  background-color: pink;
}

/*列表盒子样式，自动充满页面剩余高度*/
.root > .list {
  width: 100%;
  flex: 1;
  height: 0;
  overflow: auto;
}


/*列表元素最外层必要有一个没有宽高的div包裹，该div大小由元素撑开*/
.root > .list > .list-wrapper {
  display: flex;
  flex-wrap: wrap;
}

/*列表元素样式*/
.root > .list > .list-wrapper > .list-item {
  width: 16%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  background-color: deepskyblue;
  margin: 0 calc(4% / 6 / 2) 20px calc(4% / 6 / 2);
}

/*分页组件栏样式*/
.root > .pagination {
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, .3);
  text-align: center;
}

结果