フレックスボックスのアイテムは、「order」を使って順番を自由に入替えられます。これは結構便利かも。レイアウトの自由度が増しますね。 例：下記のように、配置したとして・・・
1
2
3
4
5
6
7
8
9
10
11
各アイテムに下記のようにクラスとorderを指定
.smpl .item 1 { order:1; }
.smpl .item 2 { order:2; }
.smpl .item 3 { order:3; }
.smpl .item 4 { order:4; }
.smpl .item 5 { order:5; }
.smpl .item 6 { order:6; }
.smpl .item 7 { order:7; }
.smpl .item 8 { order:8; }
.smpl .item 9 { order:9; }
.smpl .item 10 { order:10; }
.smpl .item 11 { order:11; }
ここで、例えば「order:1;」の数字を「7」に変えると・・・
1
2
3
4
5
6
7
8
9
10
11
１番目のアイテムが６番目に移動しましたね。（１がなくなってしまったので７番目ではなく６番目） このオーダー番号にはマイナスが使えますので、一時的に一番前に持っていきたい場合は、数値は変えずにマイナスをつけてしまうというのも分かりやすいかも知れませんね。 ただ、試してみたところ、小数点以下は使えないようです。残念。 しかし、数値は大きさの比較だけで、順番に並んでいなくてもよいようなので、１・２・３・・・ではなく10・20・30・・・のように振っておいて、例えば２番と３番の間に挟みたい時は25とか指定すると言うやり方もできますね。 上記のように、順序を指定する部分をスタイルシートの中で一箇所にまとめておけば、順番を変えたい時に楽ですね。
コメント