CODEWITHSUNDEEP
htmlcssflexbox
Josh
Josh

Reputation: 7602

Control order of vertically stacked elements using only CSS Flexbox

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.

Upvotes: 2

Views: 2492

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

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.

Upvotes: 4

Related Questions