css - Polymer Layout——在卡片和响应之间放置空间

Question

polymer 1.1

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

我不确定如何放置纸卡之间的空间。如果我执行 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>

尽情享受吧!