请问一个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

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

Answer 2

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

多说两句。

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

Answer 3

看看张鑫旭大佬的文章，有多种类型分析解决方案

Answer 4

用grid不更好吗

Answer 5

我的建议是换成 grid

Answer 6

要实现这个效果，可以考虑使用CSS的伸缩盒模型，将最后一行的不满格子拉到左侧，使得整个布局看起来整体居中且两侧对齐。代码如下：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
    }
    .div{
        display: flex;
        flex-wrap: wrap;
        width: 680px;
        justify-content: space-between;
    }
    .div:after{
        content: "";
        flex: auto;
    }
    .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>

在上述代码中，我们给容器div定义了一个伸缩盒模型，并使用justify-content: space-between 属性设置两端对齐的效果。同时，我们在.div样式中添加了一个伪元素:after，并设置了flex：auto，使伸缩盒模型在最后一行的这个伪元素中填满剩余的空间，实现了整体居中两端对齐的效果。最后一行就靠左侧了。

Answer 7

我记得你不是第一次提问这个问题了啊？想请问大家一个关于flex布局方面的问题？

总而言之就是使用 margin 或者 gap 来做间距。

我也有一个相关的问答 弹性布局(flex布局)中使用gap的兼容性问题应该如何解决？
以及一篇笔记 在 Flex 布局中使用 gap 属性