【无标题】flex布局: 一行显示固定个数,强制换行且均匀分布

.usergroup {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

  .usergroup-item {

    border: 1px solid #fff;

    flex: 1;

    height: 153px;

    margin: 0 8px 8px 0; // 间隙为5px

    width: calc((100% - 24px) / 3);  // 这里的24px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整

    min-width: calc((100% - 24px) / 3); // 加入这两个后每个item的宽度就生效了

    max-width: calc((100% - 24px) / 3); // 加入这两个后每个item的宽度就生效了

    &:nth-child(3n) { // 去除第4n个的margin-right

      margin-right: 0;

    }

  }