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：

Flex容器在订单修改文档中列出其内容从最低编号的序数组开始，然后上升。

我原本以为这意味着#green-objects会出现在＃blue-objects之前，因为order值分别为1和2 ......但它是{{{ 3）}在Chrome 36，Firefox 31或IE 11中。

根据caniuse.com的说法，flexbox在现代浏览器中得到了很好的支持。 我做错了什么？如何使用CSS Flexible Box Layout模块控制垂直堆叠元素的顺序？非常感谢帮助这个小提琴。

Answer 1

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

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

订单defaut值为0.

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

1 个答案: