diff --git a/static/flexbox/index.html b/static/flexbox/index.html
new file mode 100644
index 0000000..583eb6a
--- /dev/null
+++ b/static/flexbox/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+ Sanic - Flexbox layout
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ queue
+
+
+ controls bottom
+
+
+
+
+
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
new file mode 100644
index 0000000..8b8a136
--- /dev/null
+++ b/static/flexbox/sanic.css
@@ -0,0 +1,33 @@
+body {
+ background-color: #09101d;
+ color: #bbb;
+}
+
+div {
+ border: 1px dashed white;
+}
+
+button {
+ background-color: #28374a;
+ color: #bbb;
+}
+
+#flexbox-container {
+ display: flex;
+ flex-direction: column;
+}
+
+#controls-top {
+ display: flex;
+ flex-direction: row;
+}
+
+#top-left-controls {
+ display: flex;
+ flex-direction: column;
+}
+
+#playback-controls {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/static/flexbox/sanic.js b/static/flexbox/sanic.js
new file mode 100644
index 0000000..e69de29