diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index d453c2ff59..3360098fbb 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2663,6 +2663,12 @@ a.subdued {
  * --------------------------------------------------
  */
 .bar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2671,8 +2677,6 @@ a.subdued {
   right: 0;
   left: 0;
   z-index: 10;
-  display: -webkit-box;
-  display: box;
   box-sizing: border-box;
   padding: 5px;
   width: 100%;
@@ -2790,8 +2794,8 @@ a.subdued {
     font-size: 12px;
     line-height: 30px; }
     .bar .button .icon {
-      padding-left: 2px;
       padding-right: 2px;
+      padding-left: 2px;
       font-size: 24px;
       line-height: 30px; }
   .bar .button-bar > .button, .bar .buttons > .button {
diff --git a/scss/_bar.scss b/scss/_bar.scss
index 030568766d..a16393b91a 100644
--- a/scss/_bar.scss
+++ b/scss/_bar.scss
@@ -5,14 +5,13 @@
  */
 
 .bar {
+  @include display-flex();
   @include user-select(none);
   position: absolute;
   right: 0;
   left: 0;
   z-index: 10;
 
-  display: -webkit-box;
-  display: box;
   box-sizing: border-box;
   padding: $bar-padding-portrait;
 
@@ -44,6 +43,7 @@
     border: none;
     background: none;
     color: #fff;
+
     .button {
       color: #fff;
     }
@@ -123,8 +123,8 @@
     line-height: $button-bar-button-height - $button-border-width - 1;
 
     .icon {
-      padding-left: 2px;
       padding-right: 2px;
+      padding-left: 2px;
       font-size: $button-bar-button-icon-size;
       line-height: $button-bar-button-height - $button-border-width - 1;
     }