卡和響應

Question

聚合物1.1

之間的聚合物佈局 - 地方的空間，我有我想要一排只有2紙卡與他們之間的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> 

Answer 1

你有一些特別技巧性的東西會在這裏和一些特別的款式重疊試圖修復它。我看到的一個問題是，如果您的卡片具有靈活的寬度，那麼您需要依靠CSS calc，如果您還需要在兩張卡片之間固定爲100px。我造了下面大部分你所設定的規則後續，但也有當然，很多小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

紙卡+紙卡解決方案不會使第一卡:)在空間

我只是做了個人在自己的網站只需使用此代碼 紙卡{ 最大寬度：300像素; min-width：250px; margin：10px; }