diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index 3cf9d01..9ea208a 100644
--- a/demoHtml/flex/css/index.css
+++ b/demoHtml/flex/css/index.css
@@ -16,7 +16,37 @@ html {
 
 #app {
     display: flex;
+    flex-direction: column;
     height: 100vh;
+    overflow: hidden;
+}
+
+#main {
+    display: flex;
+    flex: 1;
+    height: calc(100vh - 60px);
+}
+
+#header {
+    flex-shrink: 0;
+    width: 100%;
+    height: 60px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+}
+#header > h1 {
+    font-size: 20px;
+}
+
+.panel-title {
+    width: 90%;
+    margin: 0 5%;
+    padding: 10px 0;
+    border-bottom: 2px solid #667eea;
 }
 
 /* Components panel */
@@ -104,7 +134,7 @@ html {
     cursor: pointer;
 }
 .save-container {
-    background: rgb(0, 123, 255, 1) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
 }
 .action-btn .trash-container > span,
 .action-btn .save-container > span {
@@ -115,11 +145,15 @@ html {
 #canvas-panel {
     flex: 4;
     height: 100%;
-    background-color: #f9fafb;
+    background-color: #fff;
     position: relative;
     overflow-y: auto;
     padding: 10px;
 }
+.grid-stack {
+    background-color: #f9fafb;
+    border-radius: 8px;
+}
 .grid-stack-item-content {
     cursor: pointer;
     background: #fff;
@@ -154,12 +188,20 @@ html {
 /* Props panel */
 #props-panel {
     flex: 1;
-    padding: 10px;
     background-color: #fff;
     overflow-y: auto;
     border-left: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
 }
 
+form {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+}
 .form-item {
     margin-bottom: 20px;
 }
diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index 5e2bbe8..e19ff22 100644
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@@ -24,114 +24,128 @@
     </head>
     <body>
         <div id="app">
-            <!-- 组件列表 -->
-            <div id="components-panel">
-                <div class="components-list">
-                    <div class="component-item grid-stack-item">
-                        <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
-                    </div>
-                    <div class="component-item grid-stack-item">
-                        <div class="grid-stack-item-content"><i class="fas fa-search"></i><span>搜索</span></div>
-                    </div>
-                    <div class="component-item grid-stack-item">
-                        <div class="grid-stack-item-content"><i class="fas fa-tv"></i><span>热门频道</span></div>
-                    </div>
-                    <div class="component-item grid-stack-item">
-                        <div class="grid-stack-item-content"><i class="fas fa-video"></i><span>直播</span></div>
-                    </div>
-                    <div class="component-item grid-stack-item">
-                        <div class="grid-stack-item-content"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
-                    </div>
-                    <div class="component-item grid-stack-item">
-                        <div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
-                    </div>
-                </div>
-                <div
-                    class="action-btn"
-                    id="trash"
-                >
-                    <div class="trash-container">
-                        <i class="fas fa-trash"></i>
-                        <span>拖动删除</span>
-                    </div>
-                    <div class="save-container">
-                        <i class="fas fa-trash"></i>
-                        <span>保存布局</span>
-                    </div>
+            <div id="header">
+                <h1>可视化布局编辑器</h1>
+                <div class="header-actions">
+                    <span>拖拽组件到画布区域</span>
                 </div>
             </div>
-            <!-- 画布容器 -->
-            <div id="canvas-panel">
-                <!-- <div class="global-save-button-container">
-                    <button class="global-save-button">保存布局</button>
-                </div> -->
-                <div class="grid-stack"></div>
-            </div>
-            <!-- 当前选中组件属性 -->
-            <div id="props-panel">
-                <div class="wait-box">请选择组件</div>
-                <form class="hidden">
-                    <div class="form-item">
-                        <label for="name">名称</label>
-                        <input
-                            type="text"
-                            id="name"
-                        />
-                    </div>
-                    <div class="form-item">
-                        <label for="background">背景颜色</label>
-                        <input
-                            type="text"
-                            id="background"
-                        />
-                    </div>
-                    <div class="form-item">
-                        <label for="fontSize">文字大小</label>
-                        <input
-                            type="text"
-                            id="fontSize"
-                        />
-                    </div>
-                    <div class="form-item">
-                        <label for="color">文字颜色</label>
-                        <input
-                            type="text"
-                            id="color"
-                        />
-                    </div>
-                    <div class="form-item">
-                        <label for="icon">图标名称</label>
-                        <input
-                            type="text"
-                            id="icon"
-                        />
+            <div id="main">
+                <!-- 组件列表 -->
+                <div id="components-panel">
+                    <div class="panel-title">
+                        <span>组件列表</span>
                     </div>
-                    <div class="form-item">
-                        <label for="detail">描述</label>
-                        <textarea id="detail"></textarea>
+                    <div class="components-list">
+                        <div class="component-item grid-stack-item">
+                            <div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
+                        </div>
+                        <div class="component-item grid-stack-item">
+                            <div class="grid-stack-item-content"><i class="fas fa-search"></i><span>搜索</span></div>
+                        </div>
+                        <div class="component-item grid-stack-item">
+                            <div class="grid-stack-item-content"><i class="fas fa-tv"></i><span>热门频道</span></div>
+                        </div>
+                        <div class="component-item grid-stack-item">
+                            <div class="grid-stack-item-content"><i class="fas fa-video"></i><span>直播</span></div>
+                        </div>
+                        <div class="component-item grid-stack-item">
+                            <div class="grid-stack-item-content"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
+                        </div>
+                        <div class="component-item grid-stack-item">
+                            <div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
+                        </div>
                     </div>
-                    <div class="form-item">
-                        <label for="link">跳转链接</label>
-                        <input
-                            type="text"
-                            id="link"
-                        />
+                    <div
+                        class="action-btn"
+                        id="trash"
+                    >
+                        <div class="trash-container">
+                            <i class="fas fa-trash"></i>
+                            <span>拖动删除</span>
+                        </div>
+                        <div class="save-container">
+                            <i class="fas fa-trash"></i>
+                            <span>保存布局</span>
+                        </div>
                     </div>
-                    <!-- <div class="form-actions">
-                        <button
-                            type="button"
-                            class="save-button"
-                        >
-                            保存组件
-                        </button>
-                        <button
-                            type="button"
-                            class="delete-button"
-                        >
-                            删除组件
-                        </button>
+                </div>
+                <!-- 画布容器 -->
+                <div id="canvas-panel">
+                    <!-- <div class="global-save-button-container">
+                        <button class="global-save-button">保存布局</button>
                     </div> -->
-                </form>
+                    <div class="grid-stack"></div>
+                </div>
+                <!-- 当前选中组件属性 -->
+                <div id="props-panel">
+                    <div class="panel-title">
+                        <span>组件属性</span>
+                    </div>
+                    <div class="wait-box">请选择组件</div>
+                    <form class="hidden">
+                        <div class="form-item">
+                            <label for="name">名称</label>
+                            <input
+                                type="text"
+                                id="name"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="background">背景颜色</label>
+                            <input
+                                type="text"
+                                id="background"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="fontSize">文字大小</label>
+                            <input
+                                type="text"
+                                id="fontSize"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="color">文字颜色</label>
+                            <input
+                                type="text"
+                                id="color"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="icon">图标名称</label>
+                            <input
+                                type="text"
+                                id="icon"
+                            />
+                        </div>
+                        <div class="form-item">
+                            <label for="detail">描述</label>
+                            <textarea id="detail"></textarea>
+                        </div>
+                        <div class="form-item">
+                            <label for="link">跳转链接</label>
+                            <input
+                                type="text"
+                                id="link"
+                            />
+                        </div>
+                        <!-- <div class="form-actions">
+                            <button
+                                type="button"
+                                class="save-button"
+                            >
+                                保存组件
+                            </button>
+                            <button
+                                type="button"
+                                class="delete-button"
+                            >
+                                删除组件
+                            </button>
+                        </div> -->
+                    </form>
+                </div>
             </div>
         </div>
     </body>
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index 6427294..7fc71d9 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -29,7 +29,7 @@
         };
         grid = GridStack.init({
             // 一行高度
-            cellHeight: 80,
+            cellHeight: 60,
             // 间距
             margin: 5,
             minRow: 8,
