diff --git a/framework/components/button.dart b/framework/components/button.dart
index ccd7ffc1491a9483f355513b61fb1079414ebfb1..e4e5f2d56ce37fac1edbbad26daba689805b3d6a 100644
--- a/framework/components/button.dart
+++ b/framework/components/button.dart
@@ -8,11 +8,7 @@ import 'material.dart';
 
 class Button extends Component {
   static final Style _style = new Style('''
-    display: inline-flex;
-    transform: translateX(0);
     -webkit-user-select: none;
-    justify-content: center;
-    align-items: center;
     height: 36px;
     min-width: 64px;
     padding: 0 8px;
diff --git a/framework/components/checkbox.dart b/framework/components/checkbox.dart
index 4ba3da3a04c6e0ec6d83c8d95d133fc67ce7daad..1924f5cd6b94b2ddb89b703dcc4cd1cf384c0088 100644
--- a/framework/components/checkbox.dart
+++ b/framework/components/checkbox.dart
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../fn.dart';
+import '../layout.dart';
 import 'button_base.dart';
 import 'dart:sky' as sky;
 
@@ -11,8 +12,6 @@ typedef void ValueChanged(value);
 class Checkbox extends ButtonBase {
   static final Style _style = new Style('''
     transform: translateX(0);
-    display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
     -webkit-user-select: none;
@@ -68,8 +67,9 @@ class Checkbox extends ButtonBase {
 
   UINode buildContent() {
     return new EventListenerNode(
-      new Container(
+      new FlexContainer(
         style: _style,
+        direction: FlexDirection.Row,
         children: [
           new Container(
             style: highlight ? _containerHighlightStyle : _containerStyle,
diff --git a/framework/components/floating_action_button.dart b/framework/components/floating_action_button.dart
index 65dae6b82ca09746cf4ab3c2dce61f651f5e5c75..b16190f5a73901824a974ed5659bcab475a36575 100644
--- a/framework/components/floating_action_button.dart
+++ b/framework/components/floating_action_button.dart
@@ -11,17 +11,13 @@ class FloatingActionButton extends Component {
   // TODO(abarth): We need a better way to become a container for absolutely
   // positioned elements.
   static final Style _style = new Style('''
-    transform: translateX(0);
     width: 56px;
     height: 56px;
     background-color: ${Red[500]};
     border-radius: 28px;'''
   );
   static final Style _clipStyle = new Style('''
-    transform: translateX(0);
     position: absolute;
-    display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
     top: 0;
diff --git a/framework/components/menu_item.dart b/framework/components/menu_item.dart
index 1539651c2be7981d748786e249f5d437cba6d072..9f6ee033d054a1a98b4b2e376ad36a62651278fc 100644
--- a/framework/components/menu_item.dart
+++ b/framework/components/menu_item.dart
@@ -9,18 +9,12 @@ import 'ink_well.dart';
 
 class MenuItem extends ButtonBase {
   static final Style _style = new Style('''
-    transform: translateX(0);
-    display: flex;
-    flex-direction: row;
     align-items: center;
     height: 48px;
     -webkit-user-select: none;'''
   );
 
   static final Style _highlightStyle = new Style('''
-    transform: translateX(0);
-    display: flex;
-    flex-direction: row;
     align-items: center;
     height: 48px;
     background: rgba(153, 153, 153, 0.4);