Index: third_party/polymer/components/iron-flex-layout/iron-flex-layout.html |
diff --git a/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html b/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html |
index a14a872b38d252365cc00585e1e5bf02e77a1f7e..a69f46a3c1f3f30ce7857376c07a863e351c51d1 100644 |
--- a/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html |
+++ b/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html |
@@ -20,14 +20,27 @@ The layout class stylesheet provides a simple set of class-based flexbox rules, |
let you specify layout properties directly in markup. You must include this file |
in every element that needs to use them. |
- Sample use: |
- |
- <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> |
- <style is="custom-style" include="iron-flex iron-flex-alignment"></style> |
- |
- <div class="layout horizontal layout-start"> |
- <div>cross axis start alignment</div> |
- </div> |
+ Sample use: |
+ |
+ ``` |
+ <custom-element-demo> |
+ <template> |
+ <script src="../webcomponentsjs/webcomponents-lite.js"></script> |
+ <next-code-block></next-code-block> |
+ </template> |
+ </custom-element-demo> |
+ ``` |
+ |
+ ```html |
+ <link rel="import" href="iron-flex-layout-classes.html"> |
+ <style is="custom-style" include="iron-flex iron-flex-alignment"></style> |
+ <style> |
+ .test { width: 100px; } |
+ </style> |
+ <div class="layout horizontal center-center"> |
+ <div class="test">horizontal layout center alignment</div> |
+ </div> |
+ ``` |
2. [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. |
@@ -105,7 +118,7 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` |
-webkit-flex-wrap: wrap; |
flex-wrap: wrap; |
}; |
- |
+ |
--layout-no-wrap: { |
-ms-flex-wrap: nowrap; |
-webkit-flex-wrap: nowrap; |