[Improvement] Cell: optimize flex layout (#919)

docs/demos/views/list.vue

@@ -65,7 +65,7 @@ export default {
 <style lang="postcss">
 .demo-list {
   .van-cell {
-    justify-content: center;
+    text-align: center;
   }
 
   .page-desc {

packages/cell-group/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-cell-group" :class="{ 'van-hairline--top-bottom': border }">
+  <div :class="[b(), { 'van-hairline--top-bottom': border }]">
     <slot />
   </div>
 </template>

packages/cell/index.vue

@@ -1,37 +1,34 @@
 <template>
   <div
-    class="van-cell"
+    :class="[
-    :class="{
+      b({
-      'van-hairline': border,
+        center,
-      'van-cell--center': center,
+        required,
-      'van-cell--required': required,
+        clickable: isLink || clickable
-      'van-cell--clickable': isLink || clickable
+      }),
-    }"
+      { 'van-hairline': border }
+    ]"
     @click="onClick"
   >
     <slot name="icon">
-      <icon v-if="icon" class="van-cell__left-icon" :name="icon" />
+      <icon v-if="icon" :class="b('left-icon')" :name="icon" />
     </slot>
-    <div class="van-cell__title" v-if="title || $slots.title">
+    <div v-if="title || $slots.title" :class="b('title')">
       <slot name="title">
         <span v-text="title" />
-        <div class="van-cell__label" v-if="label" v-text="label" />
+        <div v-if="label" v-text="label" :class="b('label')" />
       </slot>
     </div>
     <div
-      class="van-cell__value"
       v-if="value || $slots.default"
-      :class="{
+      :class="b('value', { alone: !$slots.title && !title })"
-        'van-cell__value--link': isLink,
-        'van-cell__value--alone': !$slots.title && !title && !label
-      }"
     >
       <slot>
         <span v-text="value" />
       </slot>
     </div>
     <slot name="right-icon">
-      <icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
+      <icon v-if="isLink" :class="b('right-icon')" name="arrow" />
     </slot>
     <slot name="extra" />
   </div>

packages/mixins/bem.js

@@ -39,7 +39,7 @@ export default {
       }
       el = join(name, el, ELEMENT);
 
-      return mods ? [el, prefix(name, mods)] : el;
+      return mods ? [el, prefix(el, mods)] : el;
     }
   }
 };

packages/vant-css/src/address-edit.css

@@ -11,7 +11,7 @@
 
   &__area {
     .van-cell__title {
-      width: 90px;
+      max-width: 90px;
     }
 
     .van-cell__value {

packages/vant-css/src/cell.css

@@ -1,7 +1,6 @@
 @import './common/var.css';
 
 .van-cell {
-  width: 100%;
   display: flex;
   padding: 10px 15px;
   box-sizing: border-box;
@@ -24,31 +23,38 @@
     background-color: $white;
   }
 
-  &__left-icon {
-    font-size: 16px;
-    line-height: 1.5;
-    margin-right: 5px;
-  }
-
   &__label {
     font-size: 12px;
     line-height: 1.2;
     color: $gray-darker;
   }
 
+  &__title,
   &__value {
     flex: 1;
+  }
+
+  &__value {
+    overflow: hidden;
     text-align: right;
     vertical-align: middle;
-    overflow: hidden;
 
     &--alone {
       text-align: left;
     }
+  }
+  
+  &__left-icon {
+    font-size: 16px;
+    line-height: 24px;
+    margin-right: 5px;
+  }
 
-    &--link {
+  &__right-icon {
-      padding-right: 15px;
+    color: $gray-dark;
-    }
+    font-size: 12px;
+    line-height: 24px;
+    margin-left: 5px;
   }
 
   &--clickable {
@@ -72,13 +78,4 @@
   &--center {
     align-items: center;
   }
-
-  &__right-icon {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-    color: $gray-dark;
-    font-size: 12px;
-  }
 }

packages/vant-css/src/field.css

@@ -2,7 +2,7 @@
 
 .van-field {
   .van-cell__title {
-    min-width: 90px;
+    max-width: 90px;
   }
 
   .van-cell__value {

packages/vant-css/src/sku.css

@@ -164,7 +164,7 @@
 
     &__image-cell {
       .van-cell__title {
-        width: 90px;
+        max-width: 90px;
       }
       .van-cell__value {
         text-align: left;