1 files changed, 99 insertions, 0 deletions
diff --git a/Base/res/html/misc/flex-order.html b/Base/res/html/misc/flex-order.html
new file mode 100644
index 0000000000..c0f328934e
--- /dev/null
+++ b/Base/res/html/misc/flex-order.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Flex</title>
+    <style>
+        .my-container {
+            display: flex;
+            border: 1px solid salmon;
+        }
+
+        .box {
+            width: 100px;
+            height: 100px;
+            border: 1px solid black;
+        }
+
+        .inline {
+            display: inline-block
+        }
+    </style>
+</head>
+
+<body>
+<p>2/0/1</p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="order: 2;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 0;flex: 80% 0 1;">2</div>
+    <div class="box" style="order: 1;flex: 80% 0 0;">3</div>
+</div>
+<p>2/0/1 - reverse</p>
+<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
+    <div class="box" style="order: 2;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 0;flex: 80% 0 1;">2</div>
+    <div class="box" style="order: 1;flex: 80% 0 0;">3</div>
+</div>
+<p>2/<>/1</p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="order: 2;flex: 80% 0 4;">1</div>
+    <div class="box" style="flex: 80% 0 1;">2</div>
+    <div class="box" style="order: 1;flex: 80% 0 0;">3</div>
+</div>
+<p>2/<>/1 - reverse</p>
+<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
+    <div class="box" style="order: 2;flex: 80% 0 4;">1</div>
+    <div class="box" style="flex: 80% 0 1;">2</div>
+    <div class="box" style="order: 1;flex: 80% 0 0;">3</div>
+</div>
+<p>2/0/<></p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="order: 2;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 0;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
+<p><>/0/1</p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 0;flex: 80% 0 1;">2</div>
+    <div class="box" style="order: 1;flex: 80% 0 0;">3</div>
+</div>
+<p><>/1/<></p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 1;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
+<p><>/0/<></p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 0;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
+<p>1/1/<></p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="order: 1;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 1;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
+<p>3/-1/-2</p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="order: 3;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: -1;flex: 80% 0 1;">2</div>
+    <div class="box" style="order: -2;flex: 80% 0 0;">3</div>
+</div>
+<p>-2/3/<></p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="order: -2;flex: 80% 0 4;">1</div>
+    <div class="box" style="order: 3;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
+<p><>/-1/<></p>
+<div class="my-container" style="width: 500px;">
+    <div class="box" style="flex: 80% 0 4;">1</div>
+    <div class="box" style="order: -1;flex: 80% 0 1;">2</div>
+    <div class="box" style="flex: 80% 0 0;">3</div>
+</div>
+</body>
+
+</html>