Css 聚合物布局-在卡和传感器之间留出空间

聚合物1.1

我有一个自定义元素，其中我想要一行只有两张纸卡，它们之间有100px的空间。当然，如果屏幕像手机一样收缩，我希望卡片堆叠起来

我不知道如何在纸卡之间留出空间。如果我做了

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>

：主持人[节目]{
@应用（--水平布局）；
@应用（--布局中心对齐）；
身高：100%；
宽度：100%；
背景色：var（--纸灰色-50）；
}
#主要{
宽度：100%；
边缘顶部：50px；
}
@介质和全部（最小宽度：1200px）{
#主要{
宽度：90%；
}
纸卡{
最大宽度：400px；
最小宽度：250px；
}

你在这里遇到了一些特别棘手的事情，一些特别重叠的样式试图解决它。我看到的一个关键点是，如果你的卡上有灵活的宽度，那么如果你还需要在两张卡之间有一个固定的100px，那么你就需要依赖CSS计算。我已经准备好了下面的内容，大部分内容都是关于您已经制定了一些规则，但当然，根据您的交付要求，您可以使用许多小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>

：主持人[节目]{
@应用（--水平布局）；
@应用（--左右对齐的布局）；
@应用（--布局换行）；
身高：100%；
最大宽度：1000px；
保证金：0自动；
背景色：var（--纸灰色-50）；
宽度：100%；
边缘顶部：50px；
}
纸卡{
最大宽度：400px；
最小宽度：250px；
}
@介质和全部（最小宽度：700px）{
：主持人[节目]{
@应用（--布局调整）；
}
纸卡{
宽度：计算（50%-100px）；
}
纸卡+纸卡{
左边距：100px；
}
}
@介质和全部（最小宽度：1200px）{
：主持人{
宽度：90%；
}
}
测试1
测试2

---

享受吧！

纸卡+纸卡解决方案不会在第一张卡上留下空间：）

我只是个人在我的网站上使用了这个代码 纸卡{ 最大宽度：300px； 最小宽度：250px； 利润率：10px；

---

}

啊，

纸卡+纸卡

很聪明。谢谢你的帮助。