Question

我正在开发一个Polymer应用程序。在这个应用程序中，我有三个字段，我试图水平布局。我需要它们有点间隔。实际上，我正在尝试创建以下内容。请注意，[]表示图标。

+----------------------------+----------------------------+----------------------------+
| [] First Name              |        [] Last Name        |          [] Email          |
|    __________              |           _________        |             bill@gmail.com |
+----------------------------+----------------------------+----------------------------+

第一列左对齐。中间列居中（注意标签在字段上方左对齐）。右列内容右对齐为块（注意标签在字段上没有右对齐）。为了实现这一点，我做了以下几点：

<div class="horizontal flex layout">
  <div class="horizontal layout flex-3">
    <iron-icon icon="home" style="padding:18px 8px 0px 0px;"></iron-icon>
    <paper-input label="first name" value="{{ firstName }}"></paper-input>
  </div>

  <div style="width:18px;">&nbsp;</div>

  <div class="center-justified flex-6">
    <div class="horizontal layout">
      <iron-icon icon="schedule" style="padding:18px 8px 0px 0px;"></iron-icon>
      <paper-input label="last name" value="{{ lastName }}"></paper-input>                                  
    </div>
  </div>

  <div style="width:18px;">&nbsp</div>

  <div class="flex-3">
    <div class="horizontal layout end-justified">
      <iron-icon icon="chart" style="padding:18px 8px 0px 0px;"></iron-icon>
      <paper-input label="email" value="{{ emailAddress }}"></paper-input>                                      
    </div>
  </div>
</div>

上面的代码没有正确对齐元素。电子邮件地址字段未在单元格内右对齐。此外，即使两侧都有足够的空间，姓氏字段也不会增长。它被截断了。我做错了什么？

Answer 1

tl; dr：这是一个fiddle，其中包含您正在尝试做的工作示例

以下是该小提琴中的相关代码：

<style is="custom-style">
.horizontal-layout{
   @apply(--layout-horizontal);
   @apply(--layout-center);
}
.flexchild {
  @apply(--layout-flex);
}
.flex2child {
  @apply(--layout-flex-2);
}
.noflex {
  @apply(--layout-flex-none);
}
.center-justified {
  @apply(--layout-center-justified);
}
</style>
<div class="horizontal-layout">
  <div class="horizontal-layout flexchild">
    <iron-icon icon="home" class="noflex"></iron-icon>
    <paper-input label="first name" value=""></paper-input>
  </div>

  <div class="horizontal-layout flex2child center-justified">
    <div class="horizontal-layout">
      <iron-icon icon="schedule" class="noflex"></iron-icon>
      <paper-input label="last name" value=""></paper-input>               
    </div>
  </div>

  <div class="horizontal-layout flexchild">
    <div class="horizontal-layout">
      <iron-icon icon="add" class="noflex"></iron-icon>
      <paper-input label="email" value=""></paper-input>             
    </div>
  </div>
</div>

以下是对那里发生的事情的解释：

首先，我没有使用iron-flex-layout类，我正在使用mixins，这是因为/deep/和::shadow组合器已被弃用，因为{{ 1}}类使用它们，Polymer团队建议不要使用它们。（Here's a blog post更多信息）

出于这个原因，我创建了一些应用这些mixins的css类：

iron-flex-layout使显示中的元素在a中水平主轴（.horizontal-layout）并在中心位置垂直十字轴（--layout-horizontal）
--layout-center和flexchild是这样的，当这两个类的元素都存在于flex容器中时，它们会收缩或增长，因此flex2child的大小总是一半flexchildŠ
flex2child可以防止同样的缩小和增长（这是为了防止图标缩小）
noflex将该容器内的元素置于其主轴上

请注意，我删除了具有固定宽度的div以及涉及定位或大小调整的其他样式，因为这些通常会妨碍或者被flexbox样式忽略。

知道这一切，你应该能够弄清楚一切都在小提琴中起作用。如果您想进一步自定义布局，那么真的很酷guide on the Polymer Catalog

我希望这会有所帮助。

聚合物 - 组件布局

1 个答案: