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

Question

I'm trying to use the CSS Flexible Box Layout Module to control the order that elements are rendered. Here's some sample HTML (and 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;
}

My goal is to be able to use pure CSS to control the order the #blue-objects and #green-objects elements appear. All I've been able to accomplish so far is control the horizontal sort order.

The spec describes the order property as follows :

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

I would have thought this would mean that the #green-objects would appear before #blue-objects, because of the order values being 1 and 2, respectively... but it's not working in Chrome 36, Firefox 31, or IE 11.

According to caniuse.com, flexbox has good support in modern browsers. What am I doing wrong ? How can I control the order of a vertically stacked set of elements using the CSS Flexible Box Layout module? Help with this fiddle would be greatly appreciated.

Answer 1

You should call #outer-container and not .outer-container in CSS file. Then the flex model will be triggered.

To only put blue objects last, then just apply: order:1; to it and nothing to others: DEMO

Order defaut value is 0.