flex布局

可以为容器中的每一个子元素设置 flex: 1 0 33.33%，

其中 flex-grow: 1 表示子元素可以自动增长，即充满剩余空间；

flex-shrink: 0 表示子元素不会缩小，即不会因为父容器的宽度变化而缩小；

flex-basis: 33.33% 表示每个子元素最初都占据容器的 33.33% 的宽度

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .box {
    max-width: calc(33.33% - 2px);
    flex: 1 0 33.33%;
    border: 1px solid black;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
  }
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
</div>