diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index a333938be..9c01f7e84 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-steps" :class="stepsClass">
+  <div :class="['van-steps', `van-steps--${direction}`]">
     <div class="van-steps__status" v-if="title || description">
       <div class="van-steps__icon" v-if="icon || $slots.icon">
         <slot name="icon">
@@ -56,16 +56,6 @@ export default {
     return {
       steps: []
     };
-  },
-
-  computed: {
-    stepsClass() {
-      return [
-        `van-steps--${this.direction}`, {
-          [`van-steps--${this.steps.length}`]: this.direction === 'horizontal'
-        }
-      ];
-    }
   }
 };
 </script>
diff --git a/packages/vant-css/src/steps.css b/packages/vant-css/src/steps.css
index d9219fba1..d4caff87f 100644
--- a/packages/vant-css/src/steps.css
+++ b/packages/vant-css/src/steps.css
@@ -9,6 +9,7 @@
     padding: 0 10px;
 
     .van-steps__items {
+      display: flex;
       margin: 0 0 10px;
       overflow: hidden;
       position: relative;
@@ -24,18 +25,6 @@
     padding: 0 0 0 35px;
   }
 
-  &--4 {
-    .van-step {
-      width: 33.2%;
-    }
-  }
-
-  &--3 {
-    .van-step {
-      width: 50%;
-    }
-  }
-
   &__icon {
     float: left;
     margin-right: 10px;
@@ -72,6 +61,7 @@
 }
 
 .van-step {
+  flex: 1;
   font-size: 14px;
   position: relative;
   color: $gray-dark;