当我们使用 css 属性 justify-content: space-between 将中间列删除时，中间列会创建空白

Question

当我删除 3 列行中的中间列时，最后一列不会向左移动。由于：

中间的列空间保持空白

justify-content: space-between;

尽管我删除了任何列，但是否有任何解决方案可以将我的列并排对齐？

    <!--html-->
    <div class="module">
        <h2>flex working</h2>
        <div class="flex">
            <div class="flex_inner">
                01 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
            <div class="flex_inner">
                02 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
            <div class="flex_inner">
                03 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
        </div>
    </div>
    <!--css-->
    .flex {
            display: flex;
            justify-content: space-between;
        }

    .flex_inner {
            flex: 0 0 31%;
            -webkit-box-flex: 0;
            border: 1px solid #333;
        }
<!--css end-->

Answer 1

删除 justify-content: space-between 并使用边距在每个 div 之间创建空间。或者您可以使用 space-around 代替，它们不会留在窗口的不同侧面。

   .flex {
            display: flex;
           
        }

    .flex_inner {
            flex: 0 0 31%;
            -webkit-box-flex: 0;
            border: 1px solid #333;
            margin-right: 20px;
        }

    <div class="module">
        <h2>flex working</h2>
        <div class="flex">
            <div class="flex_inner">
                01 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
            <div class="flex_inner">
                02 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
            <div class="flex_inner">
                03 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
        </div>
    </div>