orderプロパティ

ほんっとにはじめてのHTML5とCSS3【18-4】Flexboxの orderプロパティで表示順を自由に変えよう サンプル

1

5番目に

2

3

4

5

最初に

6

CSS

div#container {
	display:flex;
    flex-wrap:wrap;
	justify-content: space-between}
div#container section {flex:1 0 100px}
/*↓アイテムを全部書き出して、1番目と5番目のorderのみ入れ替え*/
div#container section:nth-child(1) {order:5}
div#container section:nth-child(2) {order:2}
div#container section:nth-child(3) {order:3}
div#container section:nth-child(4) {order:4}
div#container section:nth-child(5) {order:1}
div#container section:nth-child(6) {order:6}

1

2

3

4

5

2番目に

6

先頭に

CSS(こちらはマイナスの値を使っています)

div#container2 {
	display:flex;
    flex-wrap:wrap;
	justify-content: space-between}
div#container2 section {flex:1 0 100px}
/*↓5番目と6番目のみ マイナスの値でorderを指定*/
div#container2 section:nth-child(6) {order:-2}
div#container2 section:nth-child(5) {order:-1}