diff --git a/apps/app/ui-tests-app/flexbox/flexbox-css.css b/apps/app/ui-tests-app/flexbox/flexbox-css.css
new file mode 100644
index 000000000..5ab0d4ca8
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-css.css
@@ -0,0 +1,13 @@
+#container {
+    border-color: black;
+    border-width: 1;
+    margin: 5;
+}
+#container>Label {
+    border-width: 2;
+    border-color: black;
+    border-radius: 5;
+}
+#container>Label[selected="yes"] {
+    border-color: gray;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-css.ts b/apps/app/ui-tests-app/flexbox/flexbox-css.ts
new file mode 100644
index 000000000..a02ecc569
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-css.ts
@@ -0,0 +1,21 @@
+export const flexFlow = applyCss();
+
+function applyCss() {
+    return function(args) {
+        // args.object.page.getViewById("container")[what] = args.object.text;
+        let boxCss = " #container { " + args.object.tag + " }" ;
+        // console.log(boxCss);
+        args.object.page.addCss(boxCss);
+        console.log(args.object.page.css);
+    }
+}
+
+export function applyStyles(args) {
+    // var css = "#test-element { " + args.object.tag + " }";
+    console.log(args.object.tag);
+    args.object.page.addCss(args.object.tag);
+}
+
+export function resetTap(args) {
+    args.object.page.css = "";
+}
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-css.xml b/apps/app/ui-tests-app/flexbox/flexbox-css.xml
new file mode 100644
index 000000000..203a029f6
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-css.xml
@@ -0,0 +1,41 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" android:actionBarHidden="true" loaded="onLoaded">
+    <GridLayout rows="200, *">
+        <FlexboxLayout style="flex-wrap: wrap;" automationText="container">
+
+            <!--container-->
+            <Button text="f" tag="flex-flow: row-reverse wrap-reverse;" tap="flexFlow" automationText="flexFlow" />
+
+            <!--items-->
+            <Button text="o1" tag="#container { flex-wrap: wrap; } #itemRowReverse-0 { order: 0; } #itemRowReverse-1 { order: 2; }"                     tap="applyStyles" automationText="o1" />
+            <Button text="g1" tag="#container { flex-wrap: wrap; } #itemColumnReverse-0 { flex-grow: 1; } #itemColumnReverse-1 { flex-grow: 1; }"       tap="applyStyles" automationText="g1" />
+            <Button text="s1" tag="#container { flex-wrap: nowrap; } #itemColumnReverse-0 { flex-shrink: 0; } #itemColumnReverse-1 { flex-shrink: 0; }" tap="applyStyles" automationText="s1" />
+            <Button text="a1" tag="#container { flex-wrap: nowrap; } .one { align-self: center; }"                                                      tap="applyStyles" automationText="a1" />
+
+            <!--flex-->
+            <Button text="f0" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 0 1; } #itemColumn-1 { flex: 0 1; } #itemColumnReverse-1 { flex: 0 1; }" tap="applyStyles" automationText="f0" />
+            <Button text="f1" tag="#container { flex-wrap: wrap; } #itemRowReverse-1 { flex: 3; } #itemColumn-1 { flex: 2; } #itemColumnReverse-1 { flex: 1; }"         tap="applyStyles" automationText="f1" />
+            <Button text="f2" tag="#container { flex-wrap: nowrap; } #itemRowReverse-1 { flex: 3 0; } #itemColumn-1 { flex: 2 0; } #itemColumnReverse-1 { flex: 1 0; }" tap="applyStyles" automationText="f2" />
+
+        </FlexboxLayout>
+
+        <FlexboxLayout id="container" row="1">
+            <Label text="row"            tap="select" backgroundColor="yellow"      automationText="itemRow-0" id="itemRow-0" class="zero" margin="10" />
+            <Label text="row-reverse"    tap="select" backgroundColor="lightgreen"  automationText="itemRowReverse-0" id="itemRowReverse-0" class="zero" />
+            <Label text="column"         tap="select" backgroundColor="lightblue"   automationText="itemColumn-0" id="itemColumn-0" class="zero" />
+            <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-0" id="itemColumnReverse-0" class="zero" />
+
+            <Label text="row"            tap="select" backgroundColor="yellow"      automationText="itemRow-1" id="itemRow-1" class="one" />
+            <Label text="row-reverse"    tap="select" backgroundColor="lightgreen"  automationText="itemRowReverse-1" id="itemRowReverse-1" class="one" />
+            <Label text="column"         tap="select" backgroundColor="lightblue"   automationText="itemColumn-1" id="itemColumn-1" class="one" />
+            <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-1" id="itemColumnReverse-1" class="one" />
+
+            <!--
+            <Label text="row"            tap="select" backgroundColor="yellow"      automationText="itemRow-2" id="itemRow-2" class="two" />
+            <Label text="row-reverse"    tap="select" backgroundColor="lightgreen"  automationText="itemRowReverse-2" id="itemRowReverse-2" class="two" />
+            <Label text="column"         tap="select" backgroundColor="lightblue"   automationText="itemColumn-2" id="itemColumn-2" class="two" />
+            <Label text="column-reverse" tap="select" backgroundColor="lightsalmon" automationText="itemColumnReverse-2" id="itemColumnReverse-2" class="two" />
+            -->
+
+        </FlexboxLayout>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-demo.css b/apps/app/ui-tests-app/flexbox/flexbox-demo.css
new file mode 100644
index 000000000..9621485bf
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-demo.css
@@ -0,0 +1,25 @@
+#body {
+    flex-flow: row wrap;
+}
+
+.flex-item {
+    align-items: center;
+    justify-content: center;
+}
+
+.header, .footer {
+    flex: 1;
+    width: 100%;
+    background-color: lightgreen;
+}
+
+.main {
+    flex: 5;
+    height: 60%;
+    background-color: lightsalmon;
+}
+
+.sidebar {
+    flex: 1;
+    background-color: lightblue;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-demo.xml b/apps/app/ui-tests-app/flexbox/flexbox-demo.xml
new file mode 100644
index 000000000..92e73f886
--- /dev/null
+++ b/apps/app/ui-tests-app/flexbox/flexbox-demo.xml
@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+    <FlexboxLayout id="body">
+        <FlexboxLayout class="flex-item header">
+            <Label text="Header" />
+        </FlexboxLayout>
+        <FlexboxLayout class="flex-item sidebar">
+            <Label text="Sidebar" />
+        </FlexboxLayout>
+        <FlexboxLayout class="flex-item main">
+            <Label text="Main" />
+        </FlexboxLayout>
+        <FlexboxLayout class="flex-item sidebar">
+            <Label text="Sidebar" />
+        </FlexboxLayout>
+        <FlexboxLayout class="flex-item footer">
+            <Label text="Footer" />
+        </FlexboxLayout>
+    </FlexboxLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts b/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
index a0743205c..69477016c 100644
--- a/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
+++ b/apps/app/ui-tests-app/flexbox/flexbox-main-page.ts
@@ -10,6 +10,8 @@ export function pageLoaded(args: EventData) {
     let examples = new Map<string, string>();
 
     examples.set("flexboxall", "flexbox/flexbox");
+    examples.set("flexboxcss", "flexbox/flexbox-css");
+    examples.set("flexboxdemo", "flexbox/flexbox-demo");
     examples.set("flexrepeat", "flexbox/flexbox-repeater");
 
     let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples);