html - 1行で4つのdivのみを表示する方法 (Polymer)

Question

生徒の詳細を表示するポリマー アプリを作成しています。各生徒の名前と画像で紙のカードを動的に作成したい。今、同じカードをコピーして5枚のカードを作りました。ただし、すべての紙のカードは同じ行に表示されます。各行に 4 枚の紙のカードを表示したい。

    <dom-module id="card-view">


  <template>

    <style>
      /* local styles go here */
      :host {
        display: inline-block;
      }
      .card {
        margin-left: 5px;
        margin-right: 5px;





      }


    </style>
    <style is="custom-style">
  .flex {
    @apply(--layout-horizontal);
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    width:100%;


  }
</style>

    <!-- local DOM goes here -->




    <div class="container flex">


    <div class="card">
      <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
        <div class="card-content">
          Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
  <div class="card-actions">
    <paper-button>Share</paper-button>
    <paper-button>Explore!</paper-button>
  </div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>

<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
</div>
</template>

  <script>
  Polymer({
    is: 'card-view',
  });
  </script>

</dom-module>