iron-flex-layout icon indicating copy to clipboard operation
iron-flex-layout copied to clipboard

docs are wrong

Open davidmaxwaterman opened this issue 7 years ago • 4 comments

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).

davidmaxwaterman avatar May 17 '18 15:05 davidmaxwaterman

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)

notwaldorf avatar May 17 '18 18:05 notwaldorf

Oh, from the README. Yeah we should nuke that link

notwaldorf avatar May 17 '18 18:05 notwaldorf

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.

davidmaxwaterman avatar May 17 '18 21:05 davidmaxwaterman

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.

davidmaxwaterman avatar Dec 16 '19 16:12 davidmaxwaterman