javascript - 请问一个flex布局的问题？

Question

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .div{
            display: flex;
            flex-wrap: wrap;
            width: 680px;
            justify-content: space-between;
        }
        .div li {
            width:100px;
            height:100px;
            background-color: #ccc;
            margin-bottom: 10px;
        }

        

    </style>

 <div class="div">

        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>

        <li>1</li>
        <li>2</li>
        <li>3</li>

        <li>1</li>
        <li>2</li>
        <li>3</li>

        <li>1</li>
        <li>2</li>
        <li>3</li>

        <li>1</li>
        <li>2</li>
        <li>3</li>

        <li>1</li>
        <li>2</li>
        <li>1</li>
        <li>2</li>

    </div>

请问这种 space-between 两端对齐的，最后一行 怎样靠左和上面的一样正常显示，而不是最后一个跑到最右边去了，
网上找了很多，加伪类之类的方法都不行，请问如何去做合适？

Answer 1

你这个问题在于不应该用 space-between，直接用 gap: 1rem 之类的就好。或者 margin 也可以。

多说两句。

1. 要解决一个问题，你要先理解这个问题
2. 然后找到合理的解决方案
3. 然后解决在使用这个解决方案时遇到的问题
4. 编程不能凑合，随便找两行代码贴上去看效果，不行再换，这种办法是不行的

Answer 2

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-al...