use flex mixins

scss/ionic/_bar.scss

@@ -102,7 +102,7 @@
   }
 
   > .button {
-    @include box-flex(0);
+    @include flex(0);
     z-index: 1;
     margin: 0;
     padding: 2px 8px 0 8px;

scss/ionic/_button-bar.scss

@@ -1,17 +1,16 @@
 .button-bar {
-  @include box-flex(1);
-  @include box-orient(horizontal);
-  display: -webkit-box;
-  display: box;
+  @include display-flex();
+  @include flex(1);
+  @include flex-direction(horizontal);
 }
 
 .button-bar > .button {
-  @include box-flex(1);
+  @include flex(1);
   display: block;
   
   overflow: hidden;
 
-  padding: 8px 16px;
+  padding: 0 16px;
 
   // Fix for unequal widths of buttons
   width: 0;
@@ -23,7 +22,7 @@
   white-space: nowrap;
   // Fix for box-flex width issue
 
-  line-height: $button-bar-button-line-height;
+  line-height: $button-bar-button-line-height - 2;
 
   &:first-child {
     border-radius: 2px 0px 0px 2px;
@@ -38,8 +37,7 @@
 // to pull a set of buttons to the right side of a header
 // bar, for example.
 .buttons {
-  @include box-flex(1);
-  @include box-orient(horizontal);
-  display: -webkit-box;
-  display: box; 
+  @include display-flex();
+  @include flex(1);
+  @include flex-direction(horizontal);
 }

scss/ionic/_mixins.scss

@@ -350,18 +350,6 @@
           hyphens: $mode;
 }
 
-@mixin box-orient($orientation) {
-  box-orient: $orientation;
-  -webkit-box-orient: $orientation;
-  -moz-box-orient: $orientation;
-}
-
-@mixin box-flex($flex) {
-  box-flex: 1;
-  -webkit-box-flex: $flex;
-  -moz-box-flex: $flex;
-}
-
 @mixin display-flex {
   display: -webkit-box;
   display: -webkit-flex;

scss/ionic/_tabs.scss

@@ -5,15 +5,13 @@
  */
 
 .tabs {
-
-  @include box-orient(horizontal);
+  @include display-flex();
+  @include flex-direction(horizontal);
 
   @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
   position: fixed;
   bottom: 0;
   z-index: 5;
-  display: -webkit-box;
-  display: box;
   width: 100%;
   height: $tabs-height;
   border-style: solid;
@@ -66,13 +64,12 @@
 }
 
 .tab-item {
-  @include box-flex(1);
-  display: block;
+  @include flex(1);
+  display: inline-block;
   overflow: hidden;
   box-sizing: border-box;
+  margin: auto;
 
-  // Required to force box elements to be the same size;
-  width: 0;
   height: 100%;
 
   color: inherit;
@@ -149,3 +146,12 @@
   }
 }
 
+.item.tabs {
+  @include display-flex();
+  padding: 0;
+
+  i, .icon {
+    position: relative;
+  }
+}
+