1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 12 <html> 13 <head> 14 15 <title>iron-flex-layout demo</title> 16 <meta charset="utf-8"> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 18 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 20 21 <link rel="import" href="../../paper-styles/demo-pages.html"> 22 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 23 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 24 <link rel="import" href="../iron-flex-layout.html"> 25 26 <style is="custom-style" include="demo-pages-shared-styles"> 27 demo-snippet { 28 --demo-snippet-demo: { 29 padding: 0; 30 } 31 } 32 .container { 33 background-color: #ccc; 34 padding: 5px; 35 margin: 0; 36 } 37 .container > div { 38 padding: 15px; 39 margin: 5px; 40 background-color: white; 41 min-height: 20px; 42 } 43 44 .vertical-section-container { 45 max-width: 700px 46 } 47 </style> 48 49 </head> 50 <body unresolved class="fullbleed"> 51 <div class="vertical-section-container centered"> 52 <h4>Horizontal and vertical layout</h4> 53 <demo-snippet> 54 <template> 55 <style is="custom-style"> 56 .flex { 57 @apply(--layout-horizontal); 58 } 59 </style> 60 <div class="container flex"> 61 <div>one</div> 62 <div>two</div> 63 <div>three</div> 64 </div> 65 </template> 66 </demo-snippet> 67 68 <h4>Flexible children</h4> 69 <demo-snippet> 70 <template> 71 <style is="custom-style"> 72 .flex-horizontal { 73 @apply(--layout-horizontal); 74 } 75 .flexchild { 76 @apply(--layout-flex); 77 } 78 </style> 79 80 <div class="container flex-horizontal"> 81 <div>one</div> 82 <div class="flexchild">two (flex)</div> 83 <div>three</div> 84 </div> 85 </template> 86 </demo-snippet> 87 88 <h4>Flexible children in vertical layouts</h4> 89 <demo-snippet> 90 <template> 91 <style is="custom-style"> 92 .flex-vertical { 93 @apply(--layout-vertical); 94 height: 220px; 95 } 96 .flexchild-vertical { 97 @apply(--layout-flex); 98 } 99 </style> 100 101 <div class="container flex-vertical"> 102 <div>one</div> 103 <div class="flexchild-vertical">two (flex)</div> 104 <div>three</div> 105 </div> 106 </template> 107 </demo-snippet> 108 109 <h4>Flex ratios</h4> 110 <demo-snippet> 111 <template> 112 <style is="custom-style"> 113 .flex-horizontal-with-ratios { 114 @apply(--layout-horizontal); 115 } 116 .flexchild { 117 @apply(--layout-flex); 118 } 119 .flex2child { 120 @apply(--layout-flex-2); 121 } 122 .flex3child { 123 @apply(--layout-flex-3); 124 } 125 </style> 126 127 <div class="container flex-horizontal-with-ratios"> 128 <div class="flex3child">one</div> 129 <div class="flexchild">two</div> 130 <div class="flex2child">three</div> 131 </div> 132 </template> 133 </demo-snippet> 134 135 <h4>Cross-axis stretch alignment (default)</h4> 136 <demo-snippet> 137 <template> 138 <style is="custom-style"> 139 .flex-stretch-align { 140 @apply(--layout-horizontal); 141 height: 120px; 142 } 143 </style> 144 145 <div class="container flex-stretch-align"> 146 <div>stretch</div> 147 </div> 148 </template> 149 </demo-snippet> 150 151 <h4>Cross-axis center alignment</h4> 152 <demo-snippet> 153 <template> 154 <style is="custom-style"> 155 .flex-center-align { 156 @apply(--layout-horizontal); 157 @apply(--layout-center); 158 height: 120px; 159 } 160 </style> 161 162 <div class="container flex-center-align"> 163 <div>center</div> 164 </div> 165 </template> 166 </demo-snippet> 167 168 <h4>Cross-axis start alignment</h4> 169 <demo-snippet> 170 <template> 171 <style is="custom-style"> 172 .flex-start-align { 173 @apply(--layout-horizontal); 174 @apply(--layout-start); 175 height: 120px; 176 } 177 </style> 178 179 <div class="container flex-start-align"> 180 <div>start</div> 181 </div> 182 </template> 183 </demo-snippet> 184 185 <h4>Cross-axis end alignment</h4> 186 <demo-snippet> 187 <template> 188 <style is="custom-style"> 189 .flex-end-align { 190 @apply(--layout-horizontal); 191 @apply(--layout-end); 192 height: 120px; 193 } 194 </style> 195 196 <div class="container flex-end-align"> 197 <div>end</div> 198 </div> 199 </template> 200 </demo-snippet> 201 202 <h4>Justification, start justified</h4> 203 <demo-snippet> 204 <template> 205 <style is="custom-style"> 206 .flex-start-justified { 207 @apply(--layout-horizontal); 208 @apply(--layout-start-justified); 209 } 210 </style> 211 212 <div class="container flex-start-justified"> 213 <div>start-justified</div> 214 </div> 215 </template> 216 </demo-snippet> 217 218 <h4>Justification, start justified</h4> 219 <demo-snippet> 220 <template> 221 <style is="custom-style"> 222 .flex-center-justified { 223 @apply(--layout-horizontal); 224 @apply(--layout-center-justified); 225 } 226 </style> 227 228 <div class="container flex-center-justified"> 229 <div>center-justified</div> 230 </div> 231 </template> 232 </demo-snippet> 233 234 <h4>Justification, end justified</h4> 235 <demo-snippet> 236 <template> 237 <style is="custom-style"> 238 .flex-end-justified { 239 @apply(--layout-horizontal); 240 @apply(--layout-end-justified); 241 } 242 </style> 243 244 <div class="container flex-end-justified"> 245 <div>end-justified</div> 246 </div> 247 </template> 248 </demo-snippet> 249 250 <h4>Justification, equal space between elements</h4> 251 <demo-snippet> 252 <template> 253 <style is="custom-style"> 254 .flex-equal-justified { 255 @apply(--layout-horizontal); 256 @apply(--layout-justified); 257 } 258 </style> 259 260 <div class="container flex-equal-justified"> 261 <div>justified</div> 262 <div>justified</div> 263 <div>justified</div> 264 </div> 265 </template> 266 </demo-snippet> 267 268 <h4>Justification, equal space around each element</h4> 269 <demo-snippet> 270 <template> 271 <style is="custom-style"> 272 .flex-equal-around-justified { 273 @apply(--layout-horizontal); 274 @apply(--layout-around-justified); 275 } 276 </style> 277 278 <div class="container flex-equal-around-justified"> 279 <div>around-justified</div> 280 <div>around-justified</div> 281 </div> 282 </template> 283 </demo-snippet> 284 285 <h4>Self alignment</h4> 286 <demo-snippet> 287 <template> 288 <style is="custom-style"> 289 .flex-self-align { 290 @apply(--layout-horizontal); 291 @apply(--layout-justified); 292 height: 120px; 293 } 294 .flex-self-align div { 295 @apply(--layout-flex); 296 } 297 .child1 { 298 @apply(--layout-self-start); 299 } 300 .child2 { 301 @apply(--layout-self-center); 302 } 303 .child3 { 304 @apply(--layout-self-end); 305 } 306 .child4 { 307 @apply(--layout-self-stretch); 308 } 309 </style> 310 311 <div class="container flex-self-align"> 312 <div class="child1">one</div> 313 <div class="child2">two</div> 314 <div class="child3">three</div> 315 <div class="child4">four</div> 316 </div> 317 </template> 318 </demo-snippet> 319 320 <h4>Wrapping</h4> 321 <demo-snippet> 322 <template> 323 <style is="custom-style"> 324 .flex-wrap { 325 @apply(--layout-horizontal); 326 @apply(--layout-wrap); 327 width: 200px; 328 } 329 </style> 330 331 <div class="container flex-wrap"> 332 <div>one</div> 333 <div>two</div> 334 <div>three</div> 335 <div>four</div> 336 </div> 337 </template> 338 </demo-snippet> 339 340 <h4>Reversed layouts</h4> 341 <demo-snippet> 342 <template> 343 <style is="custom-style"> 344 .flex-reversed { 345 @apply(--layout-horizontal-reverse); 346 } 347 </style> 348 349 <div class="container flex-reversed"> 350 <div>one</div> 351 <div>two</div> 352 <div>three</div> 353 <div>four</div> 354 </div> 355 </template> 356 </demo-snippet> 357 358 <h4>General purpose rules</h4> 359 <demo-snippet> 360 <template> 361 <style is="custom-style"> 362 .general { 363 width: 100%; 364 } 365 .general > div { 366 background-color: #ccc; 367 padding: 4px; 368 margin: 12px; 369 } 370 .block { 371 @apply(--layout-block); 372 } 373 .invisible { 374 @apply(--layout-invisible); 375 } 376 .relative { 377 @apply(--layout-relative); 378 } 379 .fit { 380 @apply(--layout-fit); 381 } 382 </style> 383 384 <div class="general"> 385 <div>Before <span>[A Span]</span> After</div> 386 <div>Before <span class="block">[A Block Span]</span> After</div> 387 <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div> 388 <div class="relative" style="height: 100px;"> 389 <div class="fit" style="background-color: #000;color: white">Fit</div> 390 </div> 391 </div> 392 </template> 393 </demo-snippet> 394 </div> 395 </body> 396 </html> 397
