diff --git a/doric-Qt/example/app/demo/DoricDemoBridge.cpp b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
index c2c2924d..0fdc2f8b 100644
--- a/doric-Qt/example/app/demo/DoricDemoBridge.cpp
+++ b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
@@ -32,51 +32,54 @@ void DoricDemoBridge::navigate(QVariant route) {
     name = "EffectsDemo.js";
     break;
   case 4:
-    name = "Gobang.js";
+    name = "FlexDemo.js";
     break;
   case 5:
-    name = "ImageDemo.js";
+    name = "Gobang.js";
     break;
   case 6:
-    name = "InputDemo.js";
+    name = "ImageDemo.js";
     break;
   case 7:
-    name = "LayoutDemo.js";
+    name = "InputDemo.js";
     break;
   case 8:
-    name = "LayoutTestDemo.js";
+    name = "LayoutDemo.js";
     break;
   case 9:
-    name = "ModalDemo.js";
+    name = "LayoutTestDemo.js";
     break;
   case 10:
-    name = "ModularDemo.js";
+    name = "ModalDemo.js";
     break;
   case 11:
-    name = "NetworkDemo.js";
+    name = "ModularDemo.js";
     break;
   case 12:
-    name = "PopoverDemo.js";
+    name = "NetworkDemo.js";
     break;
   case 13:
-    name = "ScrollerDemo.js";
+    name = "PopoverDemo.js";
     break;
   case 14:
-    name = "SimpleDemo.js";
+    name = "ScrollerDemo.js";
     break;
   case 15:
-    name = "SliderDemo.js";
+    name = "SimpleDemo.js";
     break;
   case 16:
-    name = "Snake.js";
+    name = "SliderDemo.js";
     break;
   case 17:
-    name = "StorageDemo.js";
+    name = "Snake.js";
     break;
   case 18:
-    name = "SwitchDemo.js";
+    name = "StorageDemo.js";
     break;
   case 19:
+    name = "SwitchDemo.js";
+    break;
+  case 20:
     name = "TextDemo.js";
     break;
   }
diff --git a/doric-Qt/example/app/main.qml b/doric-Qt/example/app/main.qml
index f2d5ff92..31c616bf 100644
--- a/doric-Qt/example/app/main.qml
+++ b/doric-Qt/example/app/main.qml
@@ -15,7 +15,7 @@ ApplicationWindow {
 
         ListView {
             width: parent.width
-            model: 20
+            model: 21
             delegate: Rectangle {
                 Column {
                     anchors.centerIn: parent
@@ -31,36 +31,38 @@ ApplicationWindow {
                                 case 3:
                                     return "EffectsDemo.js"
                                 case 4:
-                                    return "Gobang.js"
+                                    return "FlexDemo.js"
                                 case 5:
-                                    return "ImageDemo.js"
+                                    return "Gobang.js"
                                 case 6:
-                                    return "InputDemo.js"
+                                    return "ImageDemo.js"
                                 case 7:
-                                    return "LayoutDemo.js"
+                                    return "InputDemo.js"
                                 case 8:
-                                    return "LayoutTestDemo.js"
+                                    return "LayoutDemo.js"
                                 case 9:
-                                    return "ModalDemo.js"
+                                    return "LayoutTestDemo.js"
                                 case 10:
-                                    return "ModularDemo.js"
+                                    return "ModalDemo.js"
                                 case 11:
-                                    return "NetworkDemo.js"
+                                    return "ModularDemo.js"
                                 case 12:
-                                    return "PopoverDemo.js"
+                                    return "NetworkDemo.js"
                                 case 13:
-                                    return "ScrollerDemo.js"
+                                    return "PopoverDemo.js"
                                 case 14:
-                                    return "SimpleDemo.js"
+                                    return "ScrollerDemo.js"
                                 case 15:
-                                    return "SliderDemo.js"
+                                    return "SimpleDemo.js"
                                 case 16:
-                                    return "Snake.js"
+                                    return "SliderDemo.js"
                                 case 17:
-                                    return "StorageDemo.js"
+                                    return "Snake.js"
                                 case 18:
-                                    return "SwitchDemo.js"
+                                    return "StorageDemo.js"
                                 case 19:
+                                    return "SwitchDemo.js"
+                                case 20:
                                     return "TextDemo.js"
                             }
                         }
diff --git a/doric-Qt/example/app/qml.qrc b/doric-Qt/example/app/qml.qrc
index 8365f261..930bdc61 100644
--- a/doric-Qt/example/app/qml.qrc
+++ b/doric-Qt/example/app/qml.qrc
@@ -13,6 +13,7 @@
         <file alias="Counter.js">../../../doric-demo/bundle/src/Counter.js</file>
         <file alias="DraggableDemo.js">../../../doric-demo/bundle/src/DraggableDemo.js</file>
         <file alias="EffectsDemo.js">../../../doric-demo/bundle/src/EffectsDemo.js</file>
+        <file alias="FlexDemo.js">../../../doric-demo/bundle/src/FlexDemo.js</file>
         <file alias="Gobang.js">../../../doric-demo/bundle/src/Gobang.js</file>
         <file alias="ImageDemo.js">../../../doric-demo/bundle/src/ImageDemo.js</file>
         <file alias="InputDemo.js">../../../doric-demo/bundle/src/InputDemo.js</file>
diff --git a/doric-Qt/example/doric/DoricRegistry.cpp b/doric-Qt/example/doric/DoricRegistry.cpp
index c9519ad5..dba380e3 100644
--- a/doric-Qt/example/doric/DoricRegistry.cpp
+++ b/doric-Qt/example/doric/DoricRegistry.cpp
@@ -8,6 +8,7 @@
 #include "plugin/DoricStoragePlugin.h"
 
 #include "shader/DoricDraggableNode.h"
+#include "shader/DoricFlexNode.h"
 #include "shader/DoricHLayoutNode.h"
 #include "shader/DoricImageNode.h"
 #include "shader/DoricInputNode.h"
@@ -39,6 +40,7 @@ DoricRegistry::DoricRegistry() {
   registerViewNode<DoricInputNode>("Input");
   registerViewNode<DoricSwitchNode>("Switch");
   registerViewNode<DoricDraggableNode>("Draggable");
+  registerViewNode<DoricFlexNode>("FlexLayout");
 }
 
 bool DoricRegistry::acquirePluginInfo(QString name) {
diff --git a/doric-Qt/example/doric/doric.pro b/doric-Qt/example/doric/doric.pro
index 503ec614..97e6fedd 100644
--- a/doric-Qt/example/doric/doric.pro
+++ b/doric-Qt/example/doric/doric.pro
@@ -42,6 +42,7 @@ SOURCES += \
         plugin/DoricShaderPlugin.cpp \
         plugin/DoricStoragePlugin.cpp \
         shader/DoricDraggableNode.cpp \
+        shader/DoricFlexNode.cpp \
         shader/DoricGroupNode.cpp \
         shader/DoricHLayoutNode.cpp \
         shader/DoricImageNode.cpp \
@@ -127,6 +128,7 @@ HEADERS += \
     plugin/DoricShaderPlugin.h \
     plugin/DoricStoragePlugin.h \
     shader/DoricDraggableNode.h \
+    shader/DoricFlexNode.h \
     shader/DoricGroupNode.h \
     shader/DoricHLayoutNode.h \
     shader/DoricImageNode.h \
diff --git a/doric-Qt/example/doric/resources/flex.qml b/doric-Qt/example/doric/resources/flex.qml
new file mode 100644
index 00000000..b6dac544
--- /dev/null
+++ b/doric-Qt/example/doric/resources/flex.qml
@@ -0,0 +1,180 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+import "util.mjs" as Util
+
+Rectangle {
+    id: root
+    property var wrapper
+
+    clip: true
+
+    property var uuid: Util.uuidv4()
+
+    property var tag: "Flex"
+
+    onWidthChanged: {
+        console.log(tag, uuid + " onWidthChanged: " + this.width)
+
+        updateGradient()
+    }
+
+    onHeightChanged: {
+        console.log(tag, uuid + " onHeightChanged: " + this.height)
+
+        updateGradient()
+    }
+
+    color: 'transparent'
+
+    property var backgroundColor
+
+    onBackgroundColorChanged: {
+        color = backgroundColor
+    }
+
+    property var borderWidth: 0
+    onBorderWidthChanged: {
+        border.width = borderWidth
+    }
+
+    property var borderColor: ""
+    onBorderColorChanged: {
+        border.color = borderColor
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            console.log(tag, uuid + " wrapper: " + wrapper)
+            mouseAreaBridge.onClick(wrapper)
+        }
+    }
+
+    property var shadowColor
+    property var shadowRadius
+    property var shadowOffsetX
+    property var shadowOffsetY
+    property var shadowOpacity
+
+    onShadowOpacityChanged: {
+        if (shadowOpacity > 0) {
+            layer.enabled = true
+        } else {
+            layer.enabled = false
+        }
+    }
+
+    layer.enabled: false
+    layer.effect: DropShadow {
+        horizontalOffset: shadowOffsetX
+        verticalOffset: shadowOffsetY
+        radius: shadowRadius
+        samples: 16
+        color: shadowColor
+        transparentBorder: true
+    }
+
+
+    property var backgroundColorIsObject: false
+    onBackgroundColorIsObjectChanged: {
+        if (backgroundColorIsObject) {
+            lineGradient.anchors.fill = root
+        } else {
+            lineGradient.anchors.fill = null
+        }
+    }
+
+    property variant gradientColors: []
+    property variant gradientLocations: []
+
+    onGradientColorsChanged: {
+        console.log(tag, uuid + " onGradientColorsChanged: " + gradientColors)
+        if (gradientColors.length > 0) {
+            let stops = []
+
+            if (gradientLocations.length == 0) {
+                let unit = 1 / (gradientColors.length - 1)
+                for (let i = 0;i !== gradientColors.length;i++) {
+                    let a = ((gradientColors[i] >> 24) & 0xff) / 255;
+                    let r = ((gradientColors[i] >> 16) & 0xff) / 255;
+                    let g = ((gradientColors[i] >> 8) & 0xff) / 255;
+                    let b = ((gradientColors[i] >> 0) & 0xff) / 255;
+                    let stop = stopComponent.createObject(root, {"position": unit * i, "color": Qt.rgba(r, g, b, a)})
+                    console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + unit * i + " color: " + Qt.rgba(r, g, b, a))
+                    stops.push(stop)
+                }
+            } else {
+                for (let i = 0;i !== gradientColors.length;i++) {
+                    let a = ((gradientColors[i] >> 24) & 0xff) / 255;
+                    let r = ((gradientColors[i] >> 16) & 0xff) / 255;
+                    let g = ((gradientColors[i] >> 8) & 0xff) / 255;
+                    let b = ((gradientColors[i] >> 0) & 0xff) / 255;
+                    let stop = stopComponent.createObject(root, {"position": gradientLocations[i], "color": Qt.rgba(r, g, b, a)})
+                    console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + gradientLocations[i] + " color: " + Qt.rgba(r, g, b, a))
+                    stops.push(stop)
+                }
+            }
+
+            innerGradient.stops = stops
+        }
+    }
+
+    property var orientation: 0
+
+    function updateGradient() {
+        switch (orientation) {
+        case 0:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(0, root.height)
+            break
+        case 1:
+            lineGradient.start = Qt.point(root.width, 0)
+            lineGradient.end = Qt.point(0, root.height)
+            break
+        case 2:
+            lineGradient.start = Qt.point(root.width, 0)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 3:
+            lineGradient.start = Qt.point(root.width, root.height)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 4:
+            lineGradient.start = Qt.point(0, root.height)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 5:
+            lineGradient.start = Qt.point(0, root.height)
+            lineGradient.end = Qt.point(root.width, 0)
+            break
+        case 6:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(root.width, 0)
+            break
+        case 7:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(root.width, root.height)
+            break
+        }
+    }
+    onOrientationChanged: {
+        console.log(tag, uuid + " onOrientationChanged: " + orientation)
+
+        updateGradient()
+    }
+
+    LinearGradient {
+        Component {
+            id:stopComponent
+            GradientStop {}
+        }
+
+        id: lineGradient
+        gradient: Gradient {
+            id: innerGradient
+        }
+    }
+}
diff --git a/doric-Qt/example/doric/shader/DoricFlexNode.cpp b/doric-Qt/example/doric/shader/DoricFlexNode.cpp
new file mode 100644
index 00000000..c1772368
--- /dev/null
+++ b/doric-Qt/example/doric/shader/DoricFlexNode.cpp
@@ -0,0 +1,33 @@
+#include "DoricFlexNode.h"
+
+QQuickItem *DoricFlexNode::build() {
+  QQmlComponent component(getContext()->getQmlEngine());
+
+  const QUrl url(QStringLiteral("qrc:/doric/qml/flex.qml"));
+  component.loadUrl(url);
+
+  if (component.isError()) {
+    qCritical() << component.errorString();
+  }
+
+  QQuickItem *item = qobject_cast<QQuickItem *>(component.create());
+  this->createLayouts(item);
+
+  item->setProperty("wrapper", QString::number((qint64)this));
+  return item;
+}
+
+void DoricFlexNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
+  if (name == "flexConfig") {
+
+  } else {
+    DoricGroupNode::blend(view, name, prop);
+  }
+}
+
+void DoricFlexNode::blendSubNode(DoricViewNode *subNode,
+                                 QJsonValue flexConfig) {}
+
+void DoricFlexNode::blendYoga(YGLayout *yoga, QJsonValue flexConfig) {}
+
+void DoricFlexNode::blendYoga(YGLayout *yoga, QString name, QJsonValue prop) {}
diff --git a/doric-Qt/example/doric/shader/DoricFlexNode.h b/doric-Qt/example/doric/shader/DoricFlexNode.h
new file mode 100644
index 00000000..9b525559
--- /dev/null
+++ b/doric-Qt/example/doric/shader/DoricFlexNode.h
@@ -0,0 +1,28 @@
+#ifndef DORICFLEXNODE_H
+#define DORICFLEXNODE_H
+
+#include "DoricExport.h"
+
+#include "shader/DoricStackNode.h"
+
+#include "yoga/YGLayout.h"
+
+class DORIC_EXPORT DoricFlexNode : public DoricGroupNode {
+
+public:
+  using DoricGroupNode::DoricGroupNode;
+
+  QQuickItem *build() override;
+
+  virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override;
+
+  virtual void blendSubNode(DoricViewNode *subNode,
+                            QJsonValue flexConfig) override;
+
+private:
+  void blendYoga(YGLayout *yoga, QJsonValue flexConfig);
+
+  void blendYoga(YGLayout *yoga, QString name, QJsonValue prop);
+};
+
+#endif // DORICFLEXNODE_H
diff --git a/doric-Qt/example/doric/shader/DoricSuperNode.cpp b/doric-Qt/example/doric/shader/DoricSuperNode.cpp
index 0ba91d20..9f99db8b 100644
--- a/doric-Qt/example/doric/shader/DoricSuperNode.cpp
+++ b/doric-Qt/example/doric/shader/DoricSuperNode.cpp
@@ -18,6 +18,11 @@ void DoricSuperNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
   }
 }
 
+void DoricSuperNode::blendSubNode(DoricViewNode *subNode,
+                                  QJsonValue layoutConfig) {
+  subNode->blendLayoutConfig(layoutConfig);
+}
+
 void DoricSuperNode::mixinSubNode(QJsonValue subNode) {
   QString id = subNode["id"].toString();
   QList<QString> keys = subNodes.keys();
diff --git a/doric-Qt/example/doric/shader/DoricSuperNode.h b/doric-Qt/example/doric/shader/DoricSuperNode.h
index e02f6208..cedeb16f 100644
--- a/doric-Qt/example/doric/shader/DoricSuperNode.h
+++ b/doric-Qt/example/doric/shader/DoricSuperNode.h
@@ -16,6 +16,8 @@ protected:
 
   virtual void blendSubNode(QJsonValue subProperties) = 0;
 
+  virtual void blendSubNode(DoricViewNode *subNode, QJsonValue layoutConfig);
+
   void recursiveMixin(QJsonValue src, QJsonValue target);
 
 public: