设置了flex布局之后只能在同一行显示，通过设置 flex-wrap: wrap;可以让布局换行。

HTML

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

CSS

.box {
      width: 500px;
      height: 500px;
      border: 1px solid red;
      display: flex;
      /* 让弹性盒子换行显示 */
      flex-wrap: wrap;
      /* 主轴 */
      justify-content: space-between;
      /* 多行对齐方式 */
      /* align-content: flex-start; */
      /* align-content: flex-end; */
      /* align-content: center; */
      /* align-content: space-around; */
      /* align-content: space-between; */
      align-content: space-evenly;
    }

    .box div {
      width: 150px;
      height: 100px;
      background-color: pink;
    }

    .box div:nth-child(odd) {
      background-color: purple;
    }

效果