diff --git a/ShadowEditor.UI/css/ShadowEditor.UI.css b/ShadowEditor.UI/css/ShadowEditor.UI.css
index 3c8eb120..b0c1597d 100644
--- a/ShadowEditor.UI/css/ShadowEditor.UI.css
+++ b/ShadowEditor.UI/css/ShadowEditor.UI.css
@@ -17,6 +17,13 @@ body,
     flex-direction: row;
 }
 
+/* VBoxLayout */
+
+.VBox {
+    display: flex;
+    flex-direction: column;
+}
+
 /* Panel */
 
 .Panel {
diff --git a/ShadowEditor.UI/index.html b/ShadowEditor.UI/index.html
index 6de64251..90542694 100644
--- a/ShadowEditor.UI/index.html
+++ b/ShadowEditor.UI/index.html
@@ -31,7 +31,7 @@
             region: 'center',
             key: 3
         });
-        var layout = React.createElement(Shadow.HBoxLayout, undefined, [
+        var layout = React.createElement(Shadow.VBoxLayout, undefined, [
             panel1,
             panel2,
             panel3,
diff --git a/ShadowEditor.UI/src/index.js b/ShadowEditor.UI/src/index.js
index 59f41a52..903ebfbc 100644
--- a/ShadowEditor.UI/src/index.js
+++ b/ShadowEditor.UI/src/index.js
@@ -3,6 +3,7 @@ export { default as Button } from './form/Button.jsx';
 
 // layout
 export { default as HBoxLayout } from './layout/HBoxLayout.jsx';
+export { default as VBoxLayout } from './layout/VBoxLayout.jsx';
 
 // panel
 export { default as Panel } from './panel/Panel.jsx';
diff --git a/ShadowEditor.UI/src/layout/HBoxLayout.jsx b/ShadowEditor.UI/src/layout/HBoxLayout.jsx
index 071db49a..3775859f 100644
--- a/ShadowEditor.UI/src/layout/HBoxLayout.jsx
+++ b/ShadowEditor.UI/src/layout/HBoxLayout.jsx
@@ -1,5 +1,11 @@
 import classNames from 'classnames/bind';
 
+/**
+ * 水平布局
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {String} children 内容
+ */
 class HBoxLayout extends React.Component {
     render() {
         const { className, children } = this.props;
diff --git a/ShadowEditor.UI/src/layout/VBoxLayout.jsx b/ShadowEditor.UI/src/layout/VBoxLayout.jsx
index e69de29b..d8b1477d 100644
--- a/ShadowEditor.UI/src/layout/VBoxLayout.jsx
+++ b/ShadowEditor.UI/src/layout/VBoxLayout.jsx
@@ -0,0 +1,17 @@
+import classNames from 'classnames/bind';
+
+/**
+ * 竖直布局
+ * @author tengge / https://github.com/tengge1
+ * @property {String} className 样式类
+ * @property {String} children 内容
+ */
+class VBoxLayout extends React.Component {
+    render() {
+        const { className, children } = this.props;
+
+        return <div className={classNames('VBox', className)}>{children}</div>;
+    }
+}
+
+export default VBoxLayout;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/panel/Panel.jsx b/ShadowEditor.UI/src/panel/Panel.jsx
index 10bd53cc..947d9dc5 100644
--- a/ShadowEditor.UI/src/panel/Panel.jsx
+++ b/ShadowEditor.UI/src/panel/Panel.jsx
@@ -5,14 +5,13 @@ import classNames from 'classnames/bind';
  * @author tengge / https://github.com/tengge1
  * @property {String} title 标题
  * @property {String} className 样式类
- * @property {String} region 在BorderLayout中的位置，west, east, north, south
  * @property {String} children 内容
  */
 class Panel extends React.Component {
     render() {
-        const { title, className, region, children } = this.props;
+        const { title, className, children } = this.props;
 
-        return <div className={classNames('Panel', region, className)}>
+        return <div className={classNames('Panel', className)}>
             <div className="wrap">
                 <div className="title">
                     <div className="icon">