flex 布局让有间隔且两端对齐

Question

  <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

scss 代码:

  ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li{
            flex: 0 0 24%;
            border:1px solid red;
            height: 40px;
        }
    }

如果li的数量 是刚好被 4 整除是没问题的 如果多了最后一个就会跑到右边
有什么办法让li的每一行的第一个左边没有距离 右边也没有距离 但是中间的两个是有距离的???

也试着用伪元素去解决 但是伪元素会让最后一个和倒数第二个没有距离 
到这里后又想着给倒数第二个加margin-right 加了之后是有办法解决 但是如果li的数量刚好被4整除就会有问题....纠结啊!!!

Answer 1

ul层flex左对齐li层通过margin实现间距第4n个右边距为0剩下1%的边距由第4n+1个左边实现0.5%，实现左右留白间距// 最终实现ul {    display: flex;     flex-wrap: wrap;     justify-content: left;     li {        flex: 0 0 24%;         margin-right: 1%;        border:1px solid red;         box-sizing: border-box;                         height: 40px;         &:nth-child(4n) {             margin-right: 0;         }         &:nth-child(4n+1) {             margin-left: 0.5%;         }      } }