Polymer Layout- 在卡片和响应之间放置 space

Question

聚合物 1.1

我有一个自定义元素，我想要一行只有 2 张纸卡，它们之间的间距为 100 像素 space。当然，如果屏幕像单元格一样缩小 phone，我希望卡片堆叠起来。

我不确定如何将 space 放在纸卡之间。如果我这样做 margin 或 padding 那么当卡片堆叠在较小的屏幕上时，它们会被推到一边而不是居中。

这是一个相当大的元素，所以我只放置了主要代码：

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 100%;
      width: 100%;
      background-color: var(--paper-grey-50);
     }
       #main {
      width: 100%;
      margin-top: 50px;
    }

    @media all and (min-width: 1200px) {
      #main {
        width: 90%;
      }

     paper-card {
      max-width: 400px;
      min-width: 250px;
     }


    </style>

  <template>
    <template is="dom-if" if="{{show}}">
      <div id="main">
        <div class="vertical layout">
          <div class="horizontal justified layout">
            <paper-card elevation="3" class="fancy"></paper-card>
            <paper-card elevation="3" class="fancy"></paper-card>
          </div>
        </div>
       </template>
      </template>
    </dom-module>

Answer 1

这里发生了一些特别棘手的事情，一些特别重叠的样式试图修复它。如果你的卡片上有灵活的宽度，我看到的一个症结是，如果你还需要在两张卡片之间有一个固定的 100px，那么你需要依赖 CSS calc。我已经按照您制定的大部分规则设置了以下内容，但当然还有很多 CSS 小花样，您可以根据您的交付要求进行：

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-around-justified);
      @apply(--layout-wrap);
      height: 100%;
      max-width: 1000px;
      margin: 0 auto;
      background-color: var(--paper-grey-50);
      width: 100%;
      margin-top: 50px;
    }

    paper-card {
      max-width: 400px;
      min-width: 250px;
    }
    @media all and (min-width: 700px) {
      :host[show] {
        @apply(--layout-justified);
      }
      paper-card {
        width: calc(50% - 100px);
      }
      paper-card + paper-card {
        margin-left: 100px;
      }
    }

    @media all and (min-width: 1200px) {
      :host {
        width: 90%;
      }
    }


    </style>

<template>
  <template is="dom-if" if="{{show}}">
          <paper-card elevation="3" class="fancy">Test 1</paper-card>
          <paper-card elevation="3" class="fancy">Test 2</paper-card>
  </template>
</template>

尽情享受吧！

Answer 2

纸卡+纸卡解决方案不会在第一张卡上制作space:)

我只是用这段代码在我的网站上亲自做了纸卡{ 最大宽度：300px；最小宽度：250px；边距：10px； }

Polymer Layout- 在卡片和响应之间放置 space

Polymer Layout- place space between cards and responsiveness

css

polymer

polymer-1.0