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

Question

我正在尝试使用 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 :

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up.

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

根据 caniuse.com 的说法，flexbox 在现代浏览器中拥有良好的支持。 我做错了什么？如何使用 CSS 灵活框布局模块控制垂直堆叠元素集的顺序？对于这个 fiddle 的帮助将不胜感激。

Answer 1

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

要仅将蓝色对象放在最后，则只需对其应用:order:1;，而对其他对象不应用任何内容: <强> DEMO

订单默认值为 0。