聚合物布局和 flex 属性

Question

我试图了解 Polymer 中的布局是如何工作的，但下面的事情让我感到困惑

    <div class="category-item leaderboard" vertical layout>
    <div class="tile theme-bg-a" dummy fit></div>
    <div class="tile" flex vertical layout>
      <div flex relative>
        <!-- sizing wrapper -->
        <div fit layout vertical center center-justified>
          <div class="category-bg-wrapper" relative>
            <core-icon icon="category-icons:leaderboard" class="category-tile-bg" fit></core-icon>
          </div>
        </div>
      </div>
      <div class="cat-name" horizontal center layout>
        <div flex>Leaderboard</div>
        <core-icon class="category-icon" icon="arrow-forward"></core-icon>
      </div>
    </div>
  </div>

在上面的第 3 行 (<div class="tile" flex vertical layout>) 中，“flex”属性如何影响布局，为什么需要它？在文档 (https://www.polymer-project.org/docs/polymer/layout-attrs.html) 中说：

当一个容器包含 layout 属性时，它可以成为一个 flex 容器。可以指定水平、垂直来改变方向

同样在第 4 行 (<div flex relative>) 再次将 flex 属性与 relative 一起使用的原因是什么？

Answer 1

据我所知，flex 属性使元素扩展到可用空间的大小。