Flexbox列，将订单从下到上包装

Question

试图构建一个柔性盒，其中元素的排序不仅从底部开始，而且最后一个元素不断地被推送。

订单的工作方式与此类似：

[3][6]

[2][5]

[1][4]

目前，新元素将出现在列的底部。

这甚至可以用柔性箱来完成吗？

Answer 1

这确实可以用柔性箱来完成。我们使用flex方向属性，用flex-direction: column-reverse反转顺序，然后用flex-wrap: wrap;包装盒子--这也可以通过结合flex-flow中的两个--我已经去掉了--在下面的笔中评论到。您需要注意的是，通过使用列列您的框，您将需要添加一个特定的高度到容器。如果你不这样做，他们就会一直往下走，而不是包裹。

这是一支笔，说明你的确切需要。

所用的守则：

HTML -注意顺序。

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

CSS

.container {
    display: flex;
    flex-direction: column-reverse; /* Where ordering reverses */
    flex-wrap: wrap; /* Wrapping boxes */
    /* flex-flow: column-reverse wrap; */
    height: 300px;
    width: 100px;
}
.box { /* All properties here are for illustrative purposes */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    width: 50px;
    height: 50px;

    background-color: red;
}

记住你的供应商前缀。