fix:Flex CodeReview

src/packages/col/col.scss

@@ -1,13 +1,3 @@
-
-.nut-row-flex{
-	display: flex;
-	&:after{
-		display:none;
-	}
-	.nut-col{
-		float: none;
-	}
-}
 .nut-col{
 	float: left;
 	box-sizing: border-box;

src/packages/col/col.vue

@@ -42,8 +42,6 @@ export default {
           },
           immediate: true
         }
-    },
-    methods: {
     }
 }
 </script>

src/packages/flex/demo.vue

@@ -306,7 +306,7 @@
 export default {
   data() {
       return {
-          myValue:4
+          myValue:6
       };
   },
   methods:{

src/packages/flex/doc.md

@@ -91,6 +91,21 @@
     <nut-col :span="6">
         <div class="flex-content flex-content-light">2</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" flexWrap="wrap" :gutter="10">
     <nut-col :span="6">
@@ -99,6 +114,21 @@
     <nut-col :span="6">
         <div class="flex-content flex-content-light">2</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" flexWrap="reverse" :gutter="10">
     <nut-col :span="6">
@@ -107,6 +137,21 @@
     <nut-col :span="6">
         <div class="flex-content flex-content-light">2</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">3</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">4</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">5</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">6</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">7</div>
+    </nut-col>
 </nut-row>
 
 ```
@@ -118,26 +163,56 @@
     <nut-col :span="6">
         <div class="flex-content">start</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">start</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">start</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="center">
     <nut-col :span="6">
         <div class="flex-content">center</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">center</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">center</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="end">
     <nut-col :span="6">
         <div class="flex-content">end</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">end</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">end</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="space-between">
     <nut-col :span="6">
         <div class="flex-content">between</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">between</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">between</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" justify="space-around">
     <nut-col :span="6">
         <div class="flex-content">around</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-light">around</div>
+    </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content">around</div>
+    </nut-col>
 </nut-row>
 
 ```
@@ -146,19 +221,37 @@
 
 ```html
 <nut-row type="flex" gutter="10" align="flex-start">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
     <nut-col :span="12">
         <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" gutter="10" align="center">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
     <nut-col :span="12">
         <div class="flex-content flex-content-light">居中对齐 - center</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
 </nut-row>
 <nut-row type="flex" gutter="10" align="flex-end">
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">1</div>
+    </nut-col>
     <nut-col :span="12">
         <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
     </nut-col>
+    <nut-col :span="6">
+        <div class="flex-content flex-content-height">3</div>
+    </nut-col>
 </nut-row>
 
 ```
@@ -210,12 +303,12 @@
 | tag | 自定义元素标签 | String | div
 | justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | String | start
 | align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start
-| flexWrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap
+| flex-wrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap
 
 ### col
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| span | 列元素宽度 | String/Number | -
+| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String/Number | -
 | offset | 列元素偏移距离 | String/Number | - 
 

src/packages/row/row.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="nut-row" :class="classObject" :style="styleObject">
+    <div class="nut-row" :class="getClassObject()">
     	<slot></slot>
     </div>
 </template>
@@ -32,46 +32,34 @@ export default {
             default:'nowrap'
         }
     },
-    data() {
-        return {
-            classObject:{
-                'nut-row-flex' : this.type == 'flex',
-                'nut-row-justify-center':this.justify == 'center',
-                'nut-row-justify-end':this.justify == 'end',
-                'nut-row-justify-space-between':this.justify == 'space-between',
-                'nut-row-justify-space-around':this.justify == 'space-around',
-                'nut-row-align-center':this.align == 'center',
-                'nut-row-align-flex-end':this.align == 'flex-end',
-                'nut-row-flex-wrap':this.flexWrap == 'wrap',
-                'nut-row-flex-reverse':this.flexWrap == 'reverse'
-            },
-            styleObj:{
-                'margin-left':-this.gutter+'px',
-                'margin-right':-this.gutter+'px'
-            }
-        };
-    },
     computed:{
-        styleObject(){
-            if(this.gutter!=''){
-                return function(){
-                    this.styleObj;
-                }
-            }
+        getGutter() {
+            return `${this.gutter}px`
         }
     },
     methods: {
-        initCol:function(slot){
+        initCol(slot){
             for(let i = 0;i<slot.length;i++){
                 let tag = slot[i].tag;
                 if(typeof tag == 'string'){
                     if(tag.indexOf('nut-col') != -1) {
                         var slotElm = slot[i].elm;
-                        slotElm.style.paddingLeft = this.gutter+'px';
-                        slotElm.style.paddingRight = this.gutter+'px';
+                        slotElm.style.paddingLeft = this.getGutter;
+                        slotElm.style.paddingRight = this.getGutter;
                     }
                 }
             }
+        },
+        getClass(prefix, type) {
+            return prefix ? (type ? `nut-row-${prefix}-${type}` : '') : `nut-row-${type}`;
+        },
+        getClassObject() {
+            return `
+                ${this.getClass('',this.type)}  
+                ${this.getClass('justify',this.justify)} 
+                ${this.getClass('align',this.align)} 
+                ${this.getClass('flex',this.flexWrap)}
+                `
         }
     },
     mounted() {