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

1. ul层flex左对齐

2. li层通过margin实现间距

3. 第4n个右边距为0

4. 剩下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%;
        }
     }
}