Flexbox 列，从下到上换行答案

【问题标题】：Flexbox columns, wrap order bottom to topFlexbox 列，从下到上换行
【发布时间】：2015-04-02 19:27:01
【问题描述】：

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

排序将与此类似：

[3][6]

[2][5]

[1][4]

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

这甚至可以用 flexbox 完成吗？

【问题讨论】：

很难理解你在问什么。你能举个例子说明你目前的结果和你想要的结果吗？

标签： html css flexbox

【解决方案1】：

这确实可以通过 flexbox 完成。我们使用 flex-direction 属性，用flex-direction: column-reverse 反转顺序，并用flex-wrap: wrap; 包裹盒子 - 这也可以通过在flex-flow 中组合两者来完成 - 我已经在笔中注释掉了以下。您需要注意的是，通过使用柱状框，您需要为容器添加特定高度。如果你不这样做，它们只会继续向下，而不是包裹。

Here's a pen illustrating your exact need.

以及使用的代码：

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;
}

记住您的供应商前缀。

【讨论】：