聚合物组分布局
聚合物组分布局
提问于 2015-12-18 19:55:50
我正在开发一个聚合物应用程序。在这个应用程序中，我有三个字段，我试图横向布局。我需要它们是一种间隔的evenly.Essentially，我正在尝试创建以下内容。请注意，[]表示图标。
+----------------------------+----------------------------+----------------------------+
| [] 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;"> </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;"> </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>上面的代码没有正确地对齐元素。电子邮件地址字段在单元格中不对齐。此外，即使两边都有足够的空间，姓字段也不会增长。它会被截断。我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-18 23:39:43
tl;dr:这是一个小提琴，它给出了你想要做的事情的一个工作示例
下面是小提琴中的相关代码：
<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类，我使用混合器，这是因为/deep/和::shadow组合器被废弃了，而且，由于iron-flex-layout类使用它们，聚合物团队建议不要使用它们。(这是一篇博文提供更多信息)
出于这个原因，我创建了一些css类，用于应用这些混合体：
.horizontal-layout使内部元素显示在水平主轴(--layout-horizontal)之间，并以垂直交叉轴(--layout-center)为中心。flexchild和flex2child在那里，所以当包含这两个类的元素出现在一个flex容器中时，它们会收缩或增长，这样flexchild的元素总是只有flex2child的一半大小。noflex防止同样的收缩和增长(这是为了防止图标收缩)。center-justified将容器内的元素集中在它们的主轴上。
请注意，我删除了具有固定宽度的div，以及其他涉及定位或大小大小的样式，因为这些样式通常会妨碍或被柔性盒样式忽略。
知道了这一切，你应该能够弄清楚一切是如何在小提琴中运作的。如果您想进一步自定义布局，那么就有一个非常酷的聚合物目录指南
希望这能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34363014
复制相关文章
相似问题
腾讯云开发者
