尝试通过修改聚合物教程来学习聚合物答案

【问题标题】：Trying to learn polymer by modifying polymer tutorial尝试通过修改聚合物教程来学习聚合物
【发布时间】：2014-07-08 13:11:16
【问题描述】：

我能够成功安装并运行聚合物“取消引用”教程。

现在我想修改它，但我不知道怎么做。具体来说，明信片垂直排列成一列。我想以不同的方式排列它们。例如水平和/或多列。

教程中有提示： http://www.polymer-project.org/docs/start/tutorial/step-2.html "layout 水平中心属性是 Polymer 用于创建 flexbox 布局的简写。"

所以我查看了 css-tricks.com/sn-ps/css/a-guide-to-flexbox/ 上的 flexbox 文档

然后我更改了“布局水平中心”的属性 to '布局垂直中心'，'布局水平左'，...

什么都没有改变。明信片总是垂直排成一列。有人可以引导我朝着正确的方向前进吗？答案可能很简单，只是指向我找不到的文档的链接。

Erwan，我一定遗漏了一些明显的东西。我不知道如何将您的想法合并到 post-list.html 中的这段代码中。

<div layout vertical center> 
    <template repeat="{{post in posts}}"> 
        <post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show == 'favorites' && !post.favorite}}"> 
            <img src="{{post.avatar}}" width="70" height="70"> 
            <h2>{{post.username}}</h2> 
            <p>{{post.text}}</p> 
        </post-card> 
    </template> 
</div>

我是个假人。

【问题讨论】：

Layout docs of Polymer
作为个人笔记，我发现指定布局属性并不比 HTML 中的内联样式好，它没有语义。你可以通过 CSS 使用 flexbox 来达到同样的效果。
谢谢，链接和个人笔记都很有帮助。

标签： polymer

【解决方案1】：

您可能需要更新封闭布局元素的属性。

例如，在我的应用程序中，我有一张核心卡片，里面有纸质物品，垂直堆叠。核心卡片的属性包括：垂直布局。如果我将属性更改为 horizontal layout，项目会水平堆叠。

这是 HTML：

<core-card id="core_card" vertical layout >
  <paper-item label="Title 0" icon="keep" id="paper_item0" center horizontal layout>Description 0</paper-item>
  <paper-item label="Title 1" icon="keep" id="paper_item1" center horizontal layout>Description 1</paper-item>
  <paper-item label="Title 2" icon="keep" id="paper_item2" center horizontal layout>Description 2</paper-item>
</core-card>

有关布局属性和 flexbox 的更多信息：see polymer documentation

【讨论】：

Erwan，请查看我上面的 cmets。有什么建议吗？
@marcelino 我认为您的困惑源于理解布局属性的应用方式。当您在一个元素上设置layout horizontal 时，它会导致该元素水平布置其子元素。在 Erwan 的示例中，他将每个卡片元素的内容设置为水平布局（其中没有）。要水平布置卡片本身，您需要在其容器上指定layout horizontal。

【解决方案2】：

修改聚合物示例时要考虑的一件事是查看

https://www.polymer-project.org/docs/polymer/layout-attrs.html

让我感到困惑的是使用 o start、center 和 end 而不是在垂直和水平布局中使用左中和右。

【讨论】：