Index: third_party/polymer/components/iron-flex-layout/README.md |
diff --git a/third_party/polymer/components/iron-flex-layout/README.md b/third_party/polymer/components/iron-flex-layout/README.md |
index db013a2397c8e2031cbb36fae2dcb1c01e6ec372..d5aac2fbc0080fc66e65290585d465ff23e38af5 100644 |
--- a/third_party/polymer/components/iron-flex-layout/README.md |
+++ b/third_party/polymer/components/iron-flex-layout/README.md |
@@ -1,7 +1,7 @@ |
[](https://travis-ci.org/PolymerElements/iron-flex-layout) |
[](https://beta.webcomponents.org/element/PolymerElements/iron-flex-layout) |
-##<iron-flex-layout> |
+## <iron-flex-layout> |
The `<iron-flex-layout>` component provides simple ways to use |
[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), |
@@ -14,13 +14,41 @@ in every element that needs to use them. |
Sample use: |
- <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> |
+<!-- |
+``` |
+<custom-element-demo> |
+ <template> |
+ <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
+ <link rel="import" href="iron-flex-layout-classes.html"> |
+ <dom-module id="demo-element"> |
+ <template> |
+ <style is="custom-style" include="iron-flex iron-flex-alignment"></style> |
+ <style> |
+ .container, .layout { |
+ background-color: #ccc; |
+ padding: 4px; |
+ } |
- <style is="custom-style" include="iron-flex iron-flex-alignment"></style> |
- |
- <div class="layout horizontal layout-start"> |
- <div>cross axis start alignment</div> |
- </div> |
+ .container div, .layout div { |
+ background-color: white; |
+ padding: 12px; |
+ margin: 4px; |
+ } |
+ </style> |
+ <next-code-block></next-code-block> |
+ </template> |
+ <script>Polymer({is: "demo-element"});</script> |
+ </dom-module> |
+ <demo-element></demo-element> |
+ </template> |
+</custom-element-demo> |
+``` |
+--> |
+```html |
+<div class="layout horizontal layout-start" style="height: 154px"> |
+ <div>cross axis start alignment</div> |
+</div> |
+``` |
1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). |
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. |