Question

浏览器：Firefox v35操作系统：Linux Ubuntu 14，Polymer：v1.4

跟随Rob Dodson的polycasts - 大多数视频提到使用'flex'（flexbox）来实现响应式设计。然而，我有一段艰难的时间让它发挥作用..

在下面列出的示例文件中，

纸页面板上的flex属性是超级的（即使没有它，元素也会拉伸 - 注意蓝色边框
工具栏中span标记的flex属性可以工作 - 查看更多图标scoot一直到右边。这很好/预期
最后我想将内容类的div设为'flex' - 但它不会。理想情况下，应该没有白色区域。

文档＆amp; guide没有帮助。即使指南上的片段也不适合我。

代码如下：

<!DOCTYPE html>
<html>

<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

<link rel='import' href='elements.html' />
<link rel="stylesheet" href="app.css" />
<style>
    .icon-snooze {
        color: red;
        width: 48px;
        height: 48px;
    }
</style>


<style is="custom-style" include='iron-flex iron-positioning'>
    body {
        border: 1px dashed red;
    }
    
    paper-header-panel {
        border: 2px dashed dodgerblue;
    }
    
    .content {
        border: 2px dashed tomato;
        background-color: var(--paper-light-blue-500);
    }
</style>

</head>

<body class='fullbleed vertical layout'>

<paper-header-panel class='flex'>
    <paper-toolbar>
        <paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
        <div>Header</div>
        <span class='flex'></span>
        <paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>

    </paper-toolbar>
    <div class='content flex'>Content </div>

</paper-header-panel>
</body>
</html>

更多观察：
水平弯曲按预期/开箱即用。

对于垂直弯曲，如果我在父/容器上设置显式高度，它就会起作用 - 这有点违背了目的。

<body class='fullbleed vertical layout'>
<div class='layout vertical container' style='height:50vh;' >
    <div>one</div>
    <div class="flex">two (won't flex without height set)</div>
    <div>three</div>
</div>
<div class='layout horizontal container'>
    <div>one</div>
    <div class="flex">two (will flex)</div>
    <div>three</div>
</div>
</div>

Answer 1

iron-flex-layout可能很难在开始时使用，甚至在后面使用。

让我们分析如何实现所需的输出首先，我们需要身体上的fullbleed类。这使得我们使用屏幕的全尺寸。然后我们添加<paper-header-panel>元素，它将负责我们的标题和内容的显示，定位和大小调整。我们不需要在paper-header-panel添加任何类接下来，我们添加两个div元素。其他是具有paper-header类的实际标头，而其他是具有fit类的内容主机。 fit课程负责确保我们的内容填满整个屏幕。

在paper-header类的第一个div中，我们在工具栏中添加了其他内容，就像您提供的一样。这是有效的，也是正确的。

如果您希望为您的内容设置不同的布局类型（例如horizontal或vertical），则可以将所需的classess添加到具有fit类的div。

请参阅下面的代码。

＆＃13;

<!doctype html>

<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-header-panel/paper-header-panel.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">

  <style is="custom-style" include='iron-flex iron-positioning'>
    body {
      border: 1px dashed red;
    }
    paper-header-panel {
      border: 2px dashed dodgerblue;
    }
    .fit {
      @apply(--iron-positoning-fit);
      height: 100%;
      border: 2px dashed tomato;
      background-color: #00B7FF;
    }
  </style>

</head>

<body class='fullbleed'>
  <paper-header-panel>
    <div class="paper-header">
      <paper-toolbar>
        <paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
        <div>Header</div>
        <span class="flex"></span>
        <paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
      </paper-toolbar>
    </div>
    <div class="fit">
      <div>Content</div>
    </div>
  </paper-header-panel>
</body>

＆＃13;

为什么聚合物的flex属性/类才起作用？

1 个答案: