二等分盒子部分代码

//用div一样   
 <ul class="contentUl">
      <li></li>
      <li></li>
 </ul>

css部分代码

  .contentUl {
    background-color: red;
    display: flex;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* flex布局 */
    display: flex;
    // 开启换行
    flex-wrap: wrap;
    // 主轴上两端对齐
    justify-content: space-between;
    // 副轴上两端对齐
    align-content: space-between;
    //li盒子大小设置
    li {
      width: 49.5%;
      height: 100%;
      list-style: none;
      background-color: skyblue;
    }
  }

实现效果

 四等分盒子部分代码

    <ul class="contentUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

css部分代码

  .contentUl {
    background-color: red;
    display: flex;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* flex布局 */
    display: flex;
    // 开启换行
    flex-wrap: wrap;
    // 主轴上两端对齐
    justify-content: space-between;
    // 副轴上两端对齐
    align-content: space-between;
    //li盒子大小设置
    li {
      width: 49.5%;
//高度调整
      height: 49%;
      list-style: none;
      background-color: skyblue;
    }
  }

实现效果

 实现N等分只需要增加盒子数量并按需求减少width或者height即可

8等分

    <ul class="contentUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
//css部分
  .contentUl {
    background-color: red;
    display: flex;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* flex布局 */
    display: flex;
    // 开启换行
    flex-wrap: wrap;
    // 主轴上两端对齐
    justify-content: space-between;
    // 副轴上两端对齐
    align-content: space-between;
    //li盒子大小设置
    li {
      width: 24.5%;
      height: 49%;
      list-style: none;
      background-color: skyblue;
    }
  }

效果图