Polymer CSS inline elements alignment

Question

i have some issues using polymer 1.0, i already searched the docs on the official website : http://polymer-project.org .

---

I have some custom elements : <little-game> and <big-game> both containing an image and some text in a <paper-material> element.

---

All i want is to display in this order the elements :

In the first line : A big-game element and after this in the same line, another two lines of little-game elements.

This is how the code looks so far :

<div class="flex horizontal layout">
    <big-game></big-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
</div>
<br/>
<br/>

I have attached a photo of how it looks right now and how i want to design the alignment of elements.

---

Little-game element:

<dom-module id="little-game">
  <style>
    :host {
      display: block;
      margin-left:10px;
    }

    @media (max-width: 600px) {
      h1.paper-font-display1 {
        font-size: 24px;
      }
    }
    paper-material {
      border-radius: 2px;
      height: 140px;
      padding: 0 0 16px 0;
      width: 160px;
      margin: 8px 0 2px 0;
      background: white;
    }
    paper-material img {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
    #description {
      padding:4px 16px 0 8px;
    }

    paper-fab {
      top: -27.5px;
      display:inline-block;
      background: var(--accent-color);
    }
    paper-fab iron-icon {
      color: var(--text-primary-color);
    }
    #description {
      display:inline-block;
      top : -75px;
    }
  </style>
  <template>
    <paper-material elevation="1">
      <iron-image src="http://lorempixel.com/160/120"></iron-image>
      <div id="description">Little game</div>
      <!--paper-fab class="bottom" icon="av:play-arrow" title="Go to the X Game" role="button" tabindex="0" aria-label="arrow-forward" mini></paper-fab-->
    </paper-material>
  </template>
  <script>
    Polymer({
      is:'little-game'
    })
  </script>
</dom-module>

Big game element :

<dom-module id="big-game">
  <style>
    :host {
      display: inline-block;
      float:left;
    }

    @media (max-width: 600px) {
      h1.paper-font-display1 {
        font-size: 24px;
      }
    }
    paper-material {
      border-radius: 6 px;
      height: 336px;
      width: 334px;
      margin: 8px 0 0 0;
      background: white;
    }
    paper-material img {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
    paper-fab {
      background: var(--accent-color);
    }

    paper-fab iron-icon {
      color: var(--text-primary-color);
    }
  </style>
  <template>
    <paper-material elevation="1">
      <paper-ripple></paper-ripple>
      <iron-image src="http://lorempixel.com/334/320"></iron-image>
    </paper-material>
  </template>
  <script>
    Polymer({
      is:'big-game'
    })
  </script>
</dom-module>

Answer 1

Apply float: left; to your <big-game>.

big-game { float: left; }

Proof of concept here:

https://jsfiddle.net/h7vy485e/

Answer 2

Put your layout attributes in a class attribute of your <div>.

Like this:

<div class="flex horizontal layout">

You made them independent attributes. Which was valid for Polymer 0.5. But not for Polymer 1.0. In 1.0, they need to go inside a class attribute.