仅使用 CSS Flexbox 控制垂直堆叠元素的顺序答案

【问题标题】：Control order of vertically stacked elements using only CSS Flexbox仅使用 CSS Flexbox 控制垂直堆叠元素的顺序
【发布时间】：2014-08-13 07:11:28
【问题描述】：

我正在尝试使用CSS Flexible Box Layout Module 来控制元素呈现的顺序。这是一些 HTML 示例（和 fiddle）：

<div id='outer-container'>

    <div id='blue-objects' class='object-container'>
        <p>In here we have a number of blue things.</p>
        <p>The amount of content could be very small, or very large.</p>
    </div>

    <div id='green-objects' class='object-container'>
        <p>This is very similar to the blue objects block, in that the amount of content is unknown at design-time, and it could be very small or very large.</p>
        <p>It could be a complicated, nested set of child objects, although in this example there is nothing more than two &lt;p&gt; elements.</p>
    </div>
</div>

/* Started with a columnar layout as given by the Flexplorer: http://bennettfeely.com/flexplorer/ */
.outer-container {    
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;

}

.object-container {
    -webkit-flex: 1 auto;
    flex: 1 auto;
    border: 1px dotted black;
    padding: 0 10px;
    margin: 10px;
}

#blue-objects {
    order: 2;
    font-weight: bold;
}

#green-objects {
    order: 1;
    font-style: italic;
}

我的目标是能够使用纯 CSS 来控制 #blue-objects 和 #green-objects 元素的出现顺序。到目前为止，我所能完成的就是控制水平排序顺序。

规范描述了order 属性as follows：

一个弹性容器将其内容排列在顺序修改的文档中顺序，从编号最小的序数组开始向上。

我原以为这意味着#green-objects 会出现在#blue-objects 之前，因为order 的值分别为1 和2……但在Chrome 36、Firefox 中它是not working 31 或 IE 11。

根据 caniuse.com 的说法，flexbox 在现代浏览器中有很好的支持。 我做错了什么？如何使用 CSS 灵活框布局模块控制一组垂直堆叠的元素的顺序？非常感谢您提供有关此小提琴的帮助。

【问题讨论】：

顺便说一句，如果除了 CSS Flexbox 之外还有其他方法可以控制显示顺序，我很乐意。但我认为这是在 CSS 中做到这一点的唯一方法，除了使用绝对定位（这在我的情况下不起作用，因为我在设计时不知道元素的尺寸）。
你有一个带有id“outercontainer”的元素，但没有带有class“outercontainer”的元素。 Here's an updated version of your gist with the class changed to an ID in your CSS and it works as expected
哇，太尴尬了：-(
我认为这个问题应该被删除，但是当我点击“删除”时，它会警告我删除带有答案的问题可能会导致被禁止。

标签： html css flexbox

【解决方案1】：

您应该在 CSS 文件中调用 #outer-container 而不是 .outer-container。然后会触发 flex 模型。

要只将蓝色对象放在最后，然后只需将：order:1; 应用于它，而不应用于其他对象： DEMO

订单默认值为0。

【讨论】：