我正在开发Polymer应用。在这个应用程序中，我有三个试图水平布局的字段。我需要将它们均匀地隔开。基本上，我正在尝试创建以下内容。请注意，[]表示图标。
+----------------------------+----------------------------+----------------------------+
| [] First Name | [] Last Name | [] Email |
| __________ | _________ | [email protected] |
+----------------------------+----------------------------+----------------------------+
第一列左对齐。中间列居中（注意，标签在字段上方左对齐）。右列的内容作为一个块右对齐（请注意，该标签在字段上未右对齐）。为了实现此目的，我做了以下工作：
<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>
上面的代码无法正确对齐元素。电子邮件地址字段在单元格中未正确对齐。此外，即使双方都有足够的空间，姓氏字段也不会增加。它被截断了。我究竟做错了什么？
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类使用它们，聚合物小组建议不使用它们。（这是带有更多信息的博客文章）
出于这个原因，我创建了一些应用这些mixin的css类：
.horizontal-layout使内部元素在水平主轴（--layout-horizontal）中显示并在垂直交叉轴（--layout-center）中居中flexchild并且flex2child在那里，当在Flex容器中同时存在这两个类的元素时，它们会收缩或增长，因此flexchild总是s的一半flex2child。noflex 防止相同的缩小和增长（这是为了防止图标缩小）center-justified 使该容器内的元素在其主轴上居中请注意，我删除了具有固定宽度的div以及其他涉及定位或调整大小的样式，因为这些样式通常会妨碍您的设置或被flexbox样式忽略。
了解所有这些，您应该能够弄清楚小提琴中的所有工作原理。如果要进一步自定义布局，请在Polymer Catalog上找到一个非常酷的指南
希望对您有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句