html - polymer 网格布局中的最后一行

Question

我目前正在尝试使用 polymer 制作网格布局。

   <div layout wrap horizontal justified class="projects">
      <template repeat="{{project in team['projects']}}">
        <item project="{{project['id']}}">
            <div>{{project['name']}}</div>
        </item>
      </template>
  </div>

它适用于除最后一行以外的所有行。由于 'justified' 属性，最后一行不包含足够的元素来完全填充该行，因此将其子元素均匀分布在该行中。但是，我希望它们之间的间距与其他行中的元素相同，并向左对齐，这样它们就不会填满整行。

根据我的理解，这不适用于属性“justified”。但是我可以用什么来让它工作呢？我只是找不到解决方案。

可以找到此问题的示例 here .

Answer 1

好像你在使用“space-around”..你应该使用“flex-start”。预览 flexbox 的好工具在这里:http://the-echoplex.net/flexyboxes/

这是一个示例链接:http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=row&flex-wrap=wrap&justify-content=flex-start&align-items=flex-start&align-content=flex-start&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto