CSS3のbox-ordinal-groupで順番を入れ替える

前回は主にフレックスボックスについてメモしたけども、基本的にはフレックスボックスにする要素の親要素に対するCSSを指定しましたが、今回はそのフレックスボックス自体に関するCSS3をメモ

フレックスボックスの順番を入れ替えるには？

順番を入れ替えるにはCSS3から追加された「box-ordinal-group」のプロパティを使用することになる。
上記のプロパティをそれぞれのボックスのCSSで指定してやる。＊ベンダープレフィックスは省略してます。

//左のボックスを一番右にする
.left{
    box-ordinal-group:3;
}

//真ん中のボックスを一番左にする
.center{
    box-ordinal-group:1;
}

//右のボックスを真ん中にする
.right{
    box-ordinal-group:2;
}

上記の設定を見ていただくと分かると思うが、ボックスの順番を整数で指定することで子要素の順番を指定できる。

整数は「1」から順番に左から並べ替えることができる。