From 443c8e1eecd4347de7e6f15e29f7f39c74c7822b Mon Sep 17 00:00:00 2001
From: hejiasheng <szhejason@gmail.com>
Date: Thu, 20 Sep 2018 12:47:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(flex):=20=E6=97=A0=E6=B3=95=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/flex/item/index.scss |  2 +-
 src/pages/layout/flex/index.js      | 50 ++++++++++++++++++++++-------
 src/pages/layout/flex/index.scss    |  3 +-
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/flex/item/index.scss b/src/components/flex/item/index.scss
index bca33bec1..fdd3157ca 100644
--- a/src/components/flex/item/index.scss
+++ b/src/components/flex/item/index.scss
@@ -7,7 +7,6 @@
   width: 100%;
   display: block;
   white-space: nowrap;
-  word-break: keep-all;
   box-sizing: border-box;
 
   @for $col from 1 through 12 {
@@ -40,6 +39,7 @@
 
   &--auto {
     max-width: initial;
+    word-break: keep-all;
   }
 
   &--wrap {
diff --git a/src/pages/layout/flex/index.js b/src/pages/layout/flex/index.js
index 5e4034e20..1c032ff33 100644
--- a/src/pages/layout/flex/index.js
+++ b/src/pages/layout/flex/index.js
@@ -17,8 +17,31 @@ export default class FlexPage extends Taro.Component {
       <View className='page flex-page'>
         <DocsHeader title='Flex 弹性布局' />
 
-        <View className='doc-body'>
+        {/* <View className='at-row'>
+          <Text className='at-col at-col--wrap'>
+            自动换行这样用就行了，可是换行换的不对，在有逗号的地方就换行了，后面还有很多空白
+          </Text>
+        </View>
+
+        <View className='at-row'>
+          <Text className='at-col at-col--wrap'>
+            AAAAAAAAAAA,AAAAAAAAAA,AAAAAAAAAA,AAAAAAA,AAAAAAAA,AAAAAAAAA,
+          </Text>
+        </View>
+
+        <View className='at-row'>
+          <Text className='at-col at-col-1 at-col--auto'>
+            AA,,A,,,,,
+          </Text>
+        </View>
+
+        <View className='at-row'>
+          <Text className='at-col at-col-1 at-col--auto'>
+          自动换行这样用就行了，可是换行换的不对，在有逗号的地方就换行了，后面还有很多空白
+          </Text>
+        </View> */}
 
+        <View className='doc-body'>
           {/* 基本案例 */}
           <View className='panel'>
             <View className='panel__title'>基本案例</View>
@@ -54,12 +77,8 @@ export default class FlexPage extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='at-row'>
-                  <View className='at-col at-col__offset-2'>
-                    A
-                  </View>
-                  <View className='at-col at-col__offset-3'>
-                    B
-                  </View>
+                  <View className='at-col at-col__offset-2'>A</View>
+                  <View className='at-col at-col__offset-3'>B</View>
                   <View className='at-col'>C</View>
                 </View>
               </View>
@@ -117,25 +136,33 @@ export default class FlexPage extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='at-row'>
-                  <View style='height:100px' className='at-col'>A</View>
+                  <View style='height:100px' className='at-col'>
+                    A
+                  </View>
                   <View className='at-col'>默认对齐方式 -- stretch</View>
                 </View>
               </View>
               <View className='example-item'>
                 <View className='at-row at-row__align--start'>
-                  <View style='height:100px' className='at-col'>B</View>
+                  <View style='height:100px' className='at-col'>
+                    B
+                  </View>
                   <View className='at-col'>顶部对齐 -- start</View>
                 </View>
               </View>
               <View className='example-item'>
                 <View className='at-row at-row__align--center'>
-                  <View style='height:100px' className='at-col'>C</View>
+                  <View style='height:100px' className='at-col'>
+                    C
+                  </View>
                   <View className='at-col'>居中对齐 -- center</View>
                 </View>
               </View>
               <View className='example-item'>
                 <View className='at-row at-row__align--end'>
-                  <View style='height:100px' className='at-col'>D</View>
+                  <View style='height:100px' className='at-col'>
+                    D
+                  </View>
                   <View className='at-col'>底部对齐 -- end</View>
                 </View>
               </View>
@@ -177,7 +204,6 @@ export default class FlexPage extends Taro.Component {
               </View>
             </View>
           </View>
-
         </View>
       </View>
     )
diff --git a/src/pages/layout/flex/index.scss b/src/pages/layout/flex/index.scss
index 4696cd1b8..c1626b03a 100644
--- a/src/pages/layout/flex/index.scss
+++ b/src/pages/layout/flex/index.scss
@@ -3,8 +3,7 @@
 .flex-page .at-row {
   margin-bottom: 40px;
 
-  .at-col,
-  at-flex-item { // stylelint-disable-line
+  .at-col {
     padding: $spacing-v-md $spacing-h-md;
     color: $color-white;
     font-size: $font-size-base;