CSSだけで表示順序を自由自在に変更するテスト(横並びflexbox)

HTMLには、①～⑩の10個のp要素が数字の小さい順に並んでいるボックス群が記述されています。CSS3のflexboxを使えば、これらのボックスの表示順を自由に指定できます。
下記に掲載している5つの表示例すべてで、HTMLソースの記述順は同じだという点に注目して下さい。HTMLソースの記述順を変更することなく、CSSだけで表示順序を変更できます。 詳しくは、解説記事をご参照下さい。

※このサンプルをInternet Explorerで閲覧するためには、IE11が必要です。

▼HTMLの記述順通りに並ぶ例：

▼HTMLの記述順とは逆順に並ぶ例：

▼8番だけを先頭にして並べる例：

▼4番と6番を末尾にして並べる例：

▼指定の順番(5→2→7→3→9→4→8→10→1→6)通りに並ぶ例：

解説記事に戻る