update：更新

src/app-register.ts

@@ -110,6 +110,7 @@ import Loadding  from  './directive/loadding/loadding';
 import AppColorSpan  from  './components/app-color-span/app-color-span.vue';
 import AppColorPicker from  './components/app-color-picker/app-color-picker.vue';
 import AppScrollContainer from './components/layout-container/app-scroll-container/app-scroll-container.vue';
+import AppSimpleFlexContainer from './components/layout-container/app-simpleflex-container/app-simpleflex-container.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -235,5 +236,6 @@ export const AppComponents = {
         v.component('app-color-span', AppColorSpan);
         v.component('app-color-picker', AppColorPicker);
         v.component('app-scroll-container', AppScrollContainer);
+        v.component('app-simpleflex-container',AppSimpleFlexContainer);
     },
 };
\ No newline at end of file

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

 <template>
-    <div class="app-scroll-container">
+    <div :class="curClassName">
         <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">
@@ -71,6 +71,13 @@ export default class AppScrollContainer extends Vue {
      */
     public middleContainerStyle: any = {};
 
+    /**
+     * 当前容器样式类
+     */
+    get curClassName(){
+        return `app-scroll-container ${this.name}`;
+    }
+
     /**
      * 组件初始化
      *
@@ -88,9 +95,9 @@ export default class AppScrollContainer extends Vue {
     public initScrollContainer() {
         let minusHeight = '';
         let minusWidth:string = '';
-        const curLayoutModelDetails = this.layoutModelDetails[this.name];
-        if (curLayoutModelDetails && curLayoutModelDetails.details && curLayoutModelDetails.details.length > 0) {
-            curLayoutModelDetails.details.forEach((key: string) => {
+        const curLayoutModel = this.layoutModelDetails[this.name];
+        if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
+            curLayoutModel.details.forEach((key: string) => {
                 const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];
                 const style = {};
                 if (layoutWidth) {

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

+.app-simpleflex-container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    border: 1px solid blue;
+}
\ No newline at end of file

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

+<template>
+    <div :class="curClassName" :style="curStyleContent">
+        <template v-if="containerModel.length > 0">
+            <template v-for="name of containerModel">
+                <slot :name="name"></slot>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class AppSimpleFlexContainer extends Vue {
+    /**
+    * 名称
+    *
+    * @type {string}
+    * @memberof AppSimpleFlexContainer
+    */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {string}
+     * @memberof AppSimpleFlexContainer
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 插槽对象
+     *
+     * @memberof AppSimpleFlexContainer
+     */
+    public containerModel: any[] = [];
+
+    /**
+     * 组件初始化
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public created() {
+        this.initSimpleFlexContainer();
+    }
+
+    /**
+     * 初始化SIMPLEFLEX容器
+     *
+     * @memberof SimpleFlexContainer
+     */
+    public initSimpleFlexContainer() {
+        const curLayoutModel = this.layoutModelDetails[this.name];
+        if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
+            curLayoutModel.details.forEach((key: string) => {
+                this.containerModel.push(key);
+            })
+        }
+    }
+
+    /**
+    * 当前容器样式类
+    */
+    get curClassName() {
+        return `app-simpleflex-container ${this.name}`;
+    }
+
+    /**
+    * 当前容器样式
+    */
+    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;`;
+            }
+
+        }
+        return boxLayoutPosStyle;
+    }
+}
+</script>
+<style lang='less'>
+@import 'app-simpleflex-container.less';
+</style>
\ No newline at end of file

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

@@ -4,7 +4,7 @@
  * @export
  * @class PanelDetailModel
  */
- export class PanelDetailModel {
+export class PanelDetailModel {
 
     /**
      * 成员标题
@@ -142,6 +142,14 @@
      */
     public vAlignSelf: string = '';
 
+    /**
+     * Flex延伸
+     *
+     * @type {number}
+     * @memberof PanelDetailModel
+     */
+    public flexGrow: number = 0;
+
     /**
      * Creates an instance of PanelDetailModel.
      * PanelDetailModel 实例
@@ -150,11 +158,11 @@
      * @memberof PanelDetailModel
      */
     constructor(opts: any = {}) {
-        this.caption = !Object.is(opts.caption, '') ? opts.caption : '';
-        this.itemType = !Object.is(opts.itemType, '') ? opts.itemType : '';
-        this.panel = opts.panel ? opts.panel : {};
-        this.name = !Object.is(opts.name, '') ? opts.name : '';
-        this.visible = opts.visible ? true : false;
+        this.caption = opts.caption;
+        this.itemType = opts.itemType;
+        this.panel = opts.panel;
+        this.name = opts.name;
+        this.visible = opts.visible;
         this.layout = opts.layout;
         this.layoutPos = opts.layoutPos;
         this.layoutHeight = opts.layoutHeight;
@@ -167,6 +175,7 @@
         this.spacingTop = opts.spacingTop;
         this.hAlignSelf = opts.hAlignSelf;
         this.vAlignSelf = opts.vAlignSelf;
+        this.flexGrow = opts.flexGrow;
     }
 
 }
\ No newline at end of file