title: Polymer 1.0 iron-flex-layout only works on some tags
body: <p><strong>Update: <a href="https://www.polymer-project.org/1.0/docs/migration.html" rel="nofollow noreferrer">The polymer docs</a> are now updated to reflect the answer below</strong></p>
  
  <p>I'm doing a polymer 1.0 app.</p>
  
  <p>I'm trying to layout some paper toolbars on part of the screen horizontally.<br>
  It seems I can get iron-flex-layout's @apply(--layout-horizontal) to work on some elements but not on others.</p>
  
  <p>I put together a little test below to show whats going on.<br>
  The funny thing is that if I copy the contents of the --layout-horizontal style into the tag in chrome dev tools it works. It also works if I just copy the contents of --layout-horizontal into a new style.  </p>
  
  <p>Here is the example of whats going on.  </p>
  
  <p>The first div is the example from the 0.5 to 1.0 migration guide.<br>
  The second div is the example but instead trying to layout a section instead of a span.<br>
  The third line is where I explicitly copied and applied the --layout-horizontal style.   </p>
  
  <p><img src="https://i.stack.imgur.com/ndGAE.png" alt="enter image description here"></p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html"&gt;
  
  &lt;dom-module id="layout-test"&gt;
  
      &lt;style&gt;
          /* Example from migration guide */
          .header {
              @apply(--layout-horizontal --layout-center);
          }
  
          /* A hack that makes it work */
          .hack {
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
  
              -ms-flex-direction: row;
              -webkit-flex-direction: row;
              flex-direction: row;
          }
      &lt;/style&gt;
  
      &lt;template&gt;
  
          &lt;!-- Working example from migration guide  --&gt;
          &lt;div class="header"&gt;
              &lt;img src="https://www.polymer-project.org/images/logos/lockup.svg"&gt;
              &lt;span class="name"&gt;name&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;!-- This example does not work  --&gt;
          &lt;div class="header"&gt;
              &lt;img src="https://www.polymer-project.org/images/logos/lockup.svg"&gt;
              &lt;section class="name"&gt;name&lt;/section&gt;
          &lt;/div&gt;
  
  
          &lt;!-- This hack works fine --&gt;
          &lt;div class="hack"&gt;
              &lt;img src="https://www.polymer-project.org/images/logos/lockup.svg"&gt;
              &lt;section class="name"&gt;name&lt;/section&gt;
          &lt;/div&gt;
  
      &lt;/template&gt;
  &lt;/dom-module&gt;
  &lt;script type="text/javascript"&gt;
      Polymer({
          is: 'layout-test'
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Full project is available here <a href="https://github.com/nburn42/polymer-1.0-LayoutTest" rel="nofollow noreferrer">https://github.com/nburn42/polymer-1.0-LayoutTest</a> </p>
  
  <p>Thanks,<br>
  Nathan</p>