CODEWITHSUNDEEP
htmlpolymerflexboxpolymer-1.0
Prita Hasjim
Prita Hasjim

Reputation: 343

Can someone explain how flex-ratio works with iron-flex-layout?

According to Polymer Project's Documentation on flex-layout, the below code should produce the image below.

<div class="horizontal layout demo">
  <div class="flex-3">Alpha</div>
  <div class="flex">Beta</div>
  <div class="flex-2">Gamma</div>
</div>

enter image description here

It says that "For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use flex-2 and flex-3, respectively."

I'm confused because as you can see from the image, Alpha and Gamma are the same size, and Beta just fills up the space in between. Can someone please explain?

Upvotes: 2

Views: 368

Answers (1)

tony19
tony19

Reputation: 138266

The docs demo apparently has a bug, but the explanatory text before that is correct. To use the flex factors (i.e., flex-2, flex-3, etc), make sure to include the iron-flex-factors style module in your component's style like this:

<dom-module id="x-foo">
  <template>
    <style include="iron-flex-factors"></style>
    ...

The container <div> uses horizontal and layout classes, which are defined in the iron-flex style module, so we also include that in our component's style:

<dom-module id="x-foo">
  <template>
    <style include="iron-flex-factors iron-flex"></style>
    ...


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});
<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style include="iron-flex iron-flex-factors">
        div {
          border: solid 1px blue;
        }
      </style>

      <div class="horizontal layout">
        <div class="flex-3"><p>flex-3</p></div>
        <div class="flex"><p>flex</p></div>
        <div class="flex-2"><p>flex-2</p></div>
      </div>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 3

Related Questions