Question

我能够安装并运行聚合物＆＃39; unquote＆＃39;教程成功。

现在我想修改它，但我无法弄清楚如何。具体而言，明信片在一列中垂直排列。我想以不同的方式排列它们。例如水平和/或多列。

教程中有一个提示： http://www.polymer-project.org/docs/start/tutorial/step-2.html ＆＃34;布局水平中心属性是Polymer简写，用于创建flexbox布局。＆＃34;

所以我查看了css-tricks.com/snippets/css/a-guide-to-flexbox /

中的flexbox文档

然后我改变了布局水平中心的属性＆＃39; 布局垂直中心＆＃39;，＆＃39;布局水平左边＆＃39;，...

没有任何改变。明信片总是在一列中垂直排列。有人能引导我朝着正确的方向前进吗？答案可能就像我无法找到的文档链接一样简单。

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>

我是个假人。

Answer 1

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

例如，在我的应用程序中，我有一张带有纸质物品的核心卡，垂直堆放。核心卡的属性包含：垂直布局。如果我将属性更改为水平布局，则项目将水平堆叠。

这是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

Answer 2

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

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

对我来说仍然是绊倒的是使用start，center和end而不是左右中心和右边的垂直和水平布局。

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

2 个答案: