iron-flex-layout
iron-flex-layout copied to clipboard
docs are wrong
https://elements.polymer-project.org/guides/flex-layout
Flex ratios
Children elements can be told to take up more space by including a "flex ratio" from 1 to 12. This is equivalent to specifying the CSS flex-grow property.
For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use flex-2 and flex-3, respectively.
The classes listed here are included in the iron-flex-factors module of the iron-flex-layout-classes file.
Example: classes
<div class="horizontal layout demo">
<div class="flex-3">Alpha</div>
<div class="flex">Beta</div>
<div class="flex-2">Gamma</div>
</div>
Example: mixins
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
.flex2child {
@apply(--layout-flex-2);
}
.flex3child {
@apply(--layout-flex-3);
}
</style>
<template>
<div class="container">
<div class="flex3child">One</div>
<div class="flexchild">Two</div>
<div class="flex2child">Three</div>
</div>
...
Those two code samples are not equivalent at all (even the text is different), and the example output below it seems to not relate to either - unless I'm very much mistaken, 'Alpha' should be 50% bigger than 'Gamma', but it looks smaller to me, and 'Beta' should be half of the total width (ie 12 - 3 - 2 = 6).
How uhhhh did you even get to this link? This is from the old site, which isn't maintained anymore (which is why the demos are completely hosed)
Oh, from the README. Yeah we should nuke that link
Well, I used that page a lot since I'm still on v1, so please don't...
http://lmgtfy.com/?q=polymer+iron-flex-layout
The first result ... I guess that is the README you're talking about.
I still see this link in the README on this repo:
https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html
and it 404s.