title: Polymer Iron Flex Layout Classes Not Working
body: <p>I was trying to use iron-flex-layout during the development of a website and became extremely frustrated when I spent hours try to get it to work, but to no avail. Eventually, I decided to try a bare-bones web page to see if it would work (thinking that it was probably something in my website). However, I tried the following code and I still can't get it to work! Can anyone spot my errors?</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
          &lt;link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"&gt;
          &lt;style&gt;
              body {
                  font-weight: 300;
              }
              div {
                  border: 2px solid grey;
                  background-color: white;
              }
              .layout {
                margin-bottom: 20px;
                background-color: grey;
              }
              p {
                margin: 5px;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body fullbleed unresolved&gt;
          &lt;div class="horizontal layout"&gt;
              &lt;div&gt;&lt;p&gt;div&lt;/p&gt;&lt;/div&gt;
              &lt;div class="flex"&gt;&lt;p&gt;flex (horizontal layout)&lt;/p&gt;&lt;/div&gt;
              &lt;div&gt;&lt;p&gt;div&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/l2A9i.png" rel="nofollow">Here is what the result is supposed to look like</a></p>
  
  <p><a href="http://i.stack.imgur.com/aXgFP.png" rel="nofollow">And here is what I am getting</a></p>