Question

我有一个带有两列设置的flexbox容器，其中列的高度相同。 div工作得很好，我可以看到他们的背景颜色正确排列。

但是，当我在每列中放入纸卡时，卡片没有填满空间 - 所以如果左卡比右卡长，我会在右卡下方的空白处看到背景颜色。

当尝试设置高度：100％时，卡片变得超长并将整个页面向下推。

如果我将容器的高度硬编码为500px，这可行，但我宁愿不这样做。我怎样才能让卡片填满他们的列，这些列的高度已经与最长卡的长度相匹配？

<dom-module id="my-app">
  <template>
    <style include="iron-flex iron-flex-alignment">

  :host {
    display: block;
  }

.twocols{
        display: flex;
        width: 100%;
        height: auto;
        background: lightblue;
      }

.col1{
        width: 50%;
        background: black;
      }

.col2{
        width: 50%;
        background: orange;
      }
</style>

<div class="twocols">

  <div class="col1">
    <paper-card heading="Hello1" style="width: 100%">
      <paper-item><paper-item-body><div>Hi there</div></paper-item-body></paper-item>
    </paper-card>
  </div>

  <div class="col2">
    <paper-card heading="Hello" style="height: 100%; width: 100%"></paper-card>
  </div>

</div>

Answer 1

包含卡片的聚合物元件本身需要将其显示器设置为弯曲。

如果没有：host {display：flex;}行，则卡片不会自动增长以填充其容器。由于某种原因，我仍然不知道，设置高度：100％会导致卡片长得太大。 Flex节省了一天。

请注意，我制作的自定义元素只是包含数据的纸质卡片，其功能是处理和显示卡片中的数据。

最重要的部分在这里：

<dom-module id="vehicle-info">
  <template>
    <style include="iron-flex iron-flex-alignment">
      :host{
        display: flex;
      }
      paper-card {
        width: 100%;
      }
    </style>
...

在这里：

<div class="twocols">      
        <div class="col1">
          <vehicle-info style="width: 100%;" data={{data.vehicleData}}></vehicle-info>
        </div>
        <div class="col2">
          <customer-info style="width: 100%;" data={{data.customerData}}></customer-info>
        </div>  
      </div>

所以现在每列的宽度为50％，每个元素的宽度为其列的100％，并且它将拉伸（弯曲）到底部，每张纸卡将是其自定义元素的100％宽度。

如何使聚合物纸卡成长为适合其容器？

1 个答案: