使聚合物卡水平和垂直对齐

Question

抱歉，如果这是一个容易解决的问题，我对聚合物还比较陌生。基本上我只是想不出如何根据可用屏幕 space 使卡片堆叠或并排显示。所以在我附上的图片中，卡片只是一个叠一个，但如果有可用的屏幕，我希望它们并排放置 space。

我的测试只是在预制聚合物演示上进行，所以下面的代码只是我的第一页/"view1"。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>



    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>

    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>

    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>



  </template>

  <script>
    Polymer({
      is: 'my-view1'
    });
  </script>
</dom-module>

Answer 1

看看 app-grid or iron-flex-layout, they are the solutions avaliable to your from the Polymer team anyway. You could go a number of diffrent ways. Another thing that might be worth a look is paper-card 如果您稍微向下滚动到 不同的布局和内容 部分，纸卡元素会为您解决这个问题。

Answer 2

你可以通过简单的 CSS:

#easy-css paper-card {
    width: 300px; margin: 0 auto;
}

#flexbox-css { /* container element */
    display: flex;
    justify-content: center;
}

如果需要，您可以深入研究 iron-flex-layout，它采用 flexbox 方式：

<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"/>
<link rel="import" href="bower_components/paper-card/paper-card.html"/>

<dom-module id="my-element">
<style>
    .container {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
    }
</style>

<template>
    <div class="container">
        <paper-card>center-justified</paper-card>
    </div>
</template>
<script src="my-element.js"></script>
</dom-module>

Answer 3

考虑使用 display: inline-block, which is widely supported。

.card {
  display: inline-block;  /* layout side by side; wrap if needed */
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-view1'
  });
});

body {
  margin: 0;
  font-family: Roboto, Noto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  background-color: #eeeeee;
}

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-icons/hardware-icons.html">
</head>
<body>
  <my-view1></my-view1>

  <dom-module id="my-view1">
    <template>
      <style include="shared-styles">
        :host {
          display: block;
          padding: 10px;
        }

        h1 {
          display: flex;
          justify-content: space-between;
        }

        iron-icon {
          color: #52ae54;
          --iron-icon-width: 40px;
          --iron-icon-height: 40px;
        }

        .card {
          display: inline-block;
          width: 25%;
          min-width: 250px;
          max-width: 300px;
          margin: 24px 7px;
        }

        .rightSide {
          display: inline;
          font-weight: normal;
        }
    </style>

      <template is="dom-repeat" items='[1,2,3,4]'>
        <div class="card">
          <div class="circle"><iron-icon icon="hardware:videogame-asset"></iron-icon></div>
          <h1>Game Development [[index]]<div class="rightSide">Unity3D</div></h1>
          <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
        </div>
      </template>
    </template>
  </dom-module>
  
  <dom-module id="shared-styles">
    <template>
      <style>
        h1 {
          margin: 16px 0;
          font-size: 22px;
          color: black;
        }

        .card {
          margin: 24px;
          padding: 16px;
          color: #757575;
          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        }
        
        .circle {
          display: inline-block;
          width: 64px;
          height: 64px;
          text-align: center;
          color: #555;
          border-radius: 50%;
          background: #ddd;
          font-size: 30px;
          line-height: 64px;
        }
      </style>
    </template>
  </dom-module>
</body>

codepen

使聚合物卡水平和垂直对齐

Make Polymer Cards Align horizontally and vertically

polymer

polymer-1.0

polymer-starter-kit