update：更新

src/components/layout-element/container/app-scroll-container/app-scroll-container.vue

 <template>
-    <div :class="curClassName">
+    <div :class="curClassName" :style="curStyle">
         <div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
             class="no-style overflow-auto app-scroll-container__header">
-            <template v-for="name of containerModel.NORTH.name">
+            <div v-for="name of containerModel.NORTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
                 <slot :name="name"></slot>
-            </template>
+            </div>
         </div>
         <div class="app-scroll-container__middle" :style="middleContainerStyle">
             <div v-if="containerModel.WEST" :style="containerModel.WEST.style"
                 class="no-style overflow-auto app-scroll-container__left">
-                <template v-for="name of containerModel.WEST.name">
+                <div v-for="name of containerModel.WEST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
                     <slot :name="name"></slot>
-                </template>
+                </div>
             </div>
             <div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
                 class="no-style overflow-auto app-scroll-container__center">
-                <template v-for="name of containerModel.CENTER.name">
+                <div v-for="name of containerModel.CENTER.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
                     <slot :name="name"></slot>
-                </template>
+                </div>
             </div>
             <div v-if="containerModel.EAST" :style="containerModel.EAST.style"
                 class="no-style overflow-auto app-scroll-container__right">
-                <template v-for="name of containerModel.EAST.name">
+                <div v-for="name of containerModel.EAST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
                     <slot :name="name"></slot>
-                </template>
+                </div>
             </div>
         </div>
         <div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
             class="no-style overflow-auto app-scroll-container__bottom">
-            <template v-for="name of containerModel.SOUTH.name">
+            <div v-for="name of containerModel.SOUTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
                 <slot :name="name"></slot>
-            </template>
+            </div>
         </div>
     </div>
 </template>
@@ -75,7 +75,24 @@ export default class AppScrollContainer extends Vue {
      * 当前容器样式类
      */
     get curClassName(){
-        return `app-scroll-container ${this.name}`;
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-scroll-container ${this.name} ${layoutModel.sysCss}`;
+    }
+
+    /**
+     * 当前容器样式
+     */
+    get curStyle(){
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getBoxSpacingStyle();
+    }
+
+    /**
+     * 获取项布局样式
+     */
+    public  getItemPosStyle(name:string){
+        const layoutModel = this.layoutModelDetails[name];
+        return layoutModel.getBorderLayoutStyle();
     }
 
     /**

src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.less

@@ -3,4 +3,8 @@
     height: 100%;
     display: flex;
     border: 1px solid blue;
+    .simpleflex-item__pos{
+        height: 100%;
+        width: 100%;
+    }
 }
\ No newline at end of file

src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue

 <template>
-    <div :class="curClassName" :style="curStyleContent">
+    <div :class="curClassName" :style="curStyle">
         <template v-if="containerModel.length > 0">
-            <template v-for="name of containerModel">
+            <div v-for="name of containerModel" class="simpleflex-item__pos" :style="getItemPosStyle(name)">
                 <slot :name="name"></slot>
-            </template>
+            </div>
         </template>
     </div>
 </template>
@@ -63,38 +63,27 @@ export default class AppSimpleFlexContainer extends Vue {
     * 当前容器样式类
     */
     get curClassName() {
-        return `app-simpleflex-container ${this.name}`;
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-simpleflex-container ${this.name} ${layoutModel.sysCss}`;
     }
 
     /**
      * 当前容器样式
      */
-    get curStyleContent() {
-        let boxLayoutPosStyle = "";
-        const curLayoutModel = this.layoutModelDetails[this.name];
-        if (curLayoutModel) {
-            const { layout, flexGrow } = curLayoutModel;
-            // 识别FLEX占位属性
-            if (layout && layout == 'FLEX') {
-                boxLayoutPosStyle += `'flex-grow': ${flexGrow ? flexGrow : 0};`;
-            }
-            // 识别SIMPLEFLEX占位属性
-            if (layout == 'SIMPLEFLEX') {
-                if (flexGrow) {
-                    boxLayoutPosStyle += `width: ${(100 / 12) * flexGrow}%;height: 100%;`;
-                } else {
-                    // 简单FLEX布局自适应
-                    boxLayoutPosStyle += `flex-grow:1;min-width:${(100 / 12)}%;height:100%;`;
-                }
-            }
-            // 识别边缘布局占位属性
-            if (layout == 'BORDER') {
-                boxLayoutPosStyle += `display:flex;`;
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getBoxSpacingStyle();
     }
 
+    /**
+     * 获取项布局样式
+     */
+    public getItemPosStyle(name: string) {
+        const layoutModel = this.layoutModelDetails[name];
+        return layoutModel.getCommonLayoutStyle();
     }
-        return boxLayoutPosStyle;
-    }
+
+
 }
 </script>
 <style lang='less'>

src/model/panel-detail/panel-detail.ts

@@ -292,18 +292,33 @@ export class PanelDetailModel {
     }
 
     /**
-     * 获取布局样式（布局，包含约束内容布局的样式，包含内容的对齐方式）
+     * 获取通用布局样式(SAMPLEFLEX/FLEX)（布局，包含约束内容区布局的样式，包含内容区的对齐方式）
      *
      * @return {*} 
      * @memberof PanelDetailModel
      */
-    public getLayoutStyle() {
+     public getCommonLayoutStyle() {
         const layoutStyle = {};
         Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
         Object.assign(layoutStyle, this.getBoxLayOutStyle());
+        Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
         return layoutStyle;
     }
 
+    /**
+     * 获取边缘布局样式
+     *
+     * @memberof PanelDetailModel
+     */
+    public getBorderLayoutStyle() {
+        const borderLayoutStyle: any = { width: '100%', height: '100%' };
+        if (this.layoutHeight) {
+            Object.assign(borderLayoutStyle, Util.getBoxSize("HEIGHT", this.heightMode, this.layoutHeight));
+        }
+        // TODO 合入样式代码
+        return borderLayoutStyle;
+    }
+
     /**
      * 获取自身对齐模式(布局)
      *