[CSS3] boxレイアウト（子要素の順番）

by tea4two

HTML

<p>子要素の設定</p>
<div id="container">
    <div id="box1">BOX1</div>
    <div id="box2">
        BOX2<br />
        内容を充実させます。<br />
        現在mozilla系、webkit系のみでflexがサポートされています。<br />
        プログレッシブ・エンハンスメントととして全部書いておくことを推奨します。
    </div>
    <div id="box3">
        ３つ目の要素です<br />
        ２行目は適当です。
    </div>
</div>

CSS

#container {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    display: box;
    display: -moz-box;
    display: -webkit-box;
}
#box1 {
    width: 100px;
    background: yellow;
    
    order:2;
    -webkit-order:2;
    -moz-order:2;
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
}
#box2 {
    /*width: 200px;*/
    min-width: 200px;
    
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
   
    -webkit-flex: 1 0 200px;
    -moz-flex: 1 0 200px;
    flex: 1 0 200px;
    background: pink;
    
    order: 3;
    -webkit-order: 3;
    -moz-order: 3;
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
#box3 {
    width: 150px;
    background: lightgreen;
    
    order: 1;
    -webkit-order: 1;
    -moz-order: 1;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}